jQuery Анимация высоты при переключении при наведении

Question

jQuery Анимация высоты при переключении при наведении

0

Ок, я должен упустить что-то глупое здесь, но я потерял, почему это не работает

    $('#fleet').hover(function(){
        var fleet = '2';
        $("#fleetHover").show();
        $("#fleet").animate({ "height": '+=' + (fleet * 30) + 'px' }, "slow");
    }, function(){
        $("#fleetHover").hide();
          $("#fleet").animate({ "height": '-=' + (fleet * 30) + 'px' }, "slow");
    });

Когда я нахожу элемент, он увеличивает высоту, которая мне нужна. Но когда я выхожу, он не возвращается.

Но если я делаю это с высотой как значением, а не с переменной, она работает.

    $('#fleet').hover(function(){
        var fleet = '2';
        $("#fleetHover").show();
        $("#fleet").animate({ "height": '+=' + (fleet * 30) + 'px' }, "slow");
    }, function(){
        $("#fleetHover").hide();
          $("#fleet").animate({ "height": "-=60px" }, "slow");
    });

Что мне здесь не хватает? Я медленно изучаю материал JS/jQuery, может ли переменная не использоваться более одного раза?

Любая помощь будет замечательной!

Travis 02 окт. 2013, в 20:40

Источник

Теги:

javascript

jquery

html

css

2 ответа

1

Я удалю этот ответ, если вы не хотите эту опцию.

Просто используйте анимацию CSS3 с состояниями наведения CSS.

.grow {
  height: 140px;
  width: 40px;
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 100px;
  background: mediumSeaGreen;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
}

.grow:hover {
  height: 200px;
}

jsfiddle

Josh Powell 02 окт. 2013, в 15:43

0

Поверьте мне, я хотел бы использовать CSS для этого, но мне нужна переменная, передаваемая мне для высоты из Java-приложения, и я не знаю, с чего начать с взятия Java-объекта и помещения его в CSS
Travis 02 окт. 2013, в 18:30
0

Ааа я понимаю! Что ж, я рад, что вы нашли ответ и удачи, приятель, если вы хотите, чтобы я удалил свой ответ, не стесняйтесь, дайте мне знать.
Josh Powell 02 окт. 2013, в 18:32
0

Не имеет значения для меня, я люблю, что вы мыслили нестандартно. CSS - это то, куда я иду перед JS :)
Travis 02 окт. 2013, в 18:36
0

Да, я наркоман CSS и люблю то, что он предлагает сейчас. Если бы только IE уже сдался, то нас, разработчиков, установили бы!
Josh Powell 02 окт. 2013, в 18:39

Показать ещё 2 комментария

Ещё вопросы

Поверьте мне, я хотел бы использовать CSS для этого, но мне нужна переменная, передаваемая мне для высоты из Java-приложения, и я не знаю, с чего начать с взятия Java-объекта и помещения его в CSS
Ааа я понимаю! Что ж, я рад, что вы нашли ответ и удачи, приятель, если вы хотите, чтобы я удалил свой ответ, не стесняйтесь, дайте мне знать.
Не имеет значения для меня, я люблю, что вы мыслили нестандартно. CSS - это то, куда я иду перед JS :)
Да, я наркоман CSS и люблю то, что он предлагает сейчас. Если бы только IE уже сдался, то нас, разработчиков, установили бы!

Jason P · Accepted Answer · 2013-10-02T16-21-00.000Z

Переменная вашего fleet определена внутри и привязана к первой анонимной функции. Он недоступен для второй анонимной функции. Одним из решений было бы определить переменную вне обеих функций:

var fleet = '2';
$('#fleet').hover(function(){        
    $("#fleetHover").show();
    $("#fleet").animate({ "height": '+=' + (fleet * 30) + 'px' }, "slow");
}, function(){
    $("#fleetHover").hide();
    $("#fleet").animate({ "height": '-=' + (fleet * 30) + 'px' }, "slow");
});

Эххххххх, я идиот ... тот маленький jQuery, который я знаю, это один из них, спасибо за то, что указал на очевидную вещь, с которой я выглядел, теперь отлично работает!
Я бы предложил превратить это в функцию, или эту переменную можно будет использовать в файле скрипта. Обратитесь к редактированию, которое я сделал.