Несколько экземпляров при наведении jQuery

У меня есть div для анимации сверху вниз другого div. В настоящее время я играю с анимацией mouseenter/leave и JS с ослаблением, где исходное состояние находится вверху/вверху. Я хочу навести курсор мыши/ввести мышь и заставить его двигаться вниз и оставаться внизу, если я уйду/наведите указатель мыши. Когда я снова наведу курсор, он вернется к началу/началу.

Первоначально я использовал mouseenter/leave, который, очевидно, не делает то, что мне нужно, поскольку я хотел бы, чтобы состояние оставалось прежним после mouseleave. Итак, какая функция лучше всего подходит для этой потребности? Я все еще изучаю терминологию и спотыкаюсь о том, как лучше сформулировать вопрос.

Код:

    function init() { 
        mouseenter: function(){
            $(".ltrP").stop(true, true).animate({
                marginTop:"170px"
            }, 
            {
                duration: 1000,
                easing: "easeOutBounce"
            });
        },
        mouseleave: function(){
            $(".ltrP").stop(true, true).animate({
                marginTop: "0px"
            },
            {
                duration: 1000,
                easing: "easeInBounce"
            });   
        }
    });
}
window.onload = init;

javascript animation hover multiple-instances mouseenter
person Commandrea    schedule 12.07.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я отредактировал ваш фрагмент кода, см. комментарии для объяснения:

$(document).ready(function(){ // Runs when document is loaded

    $(".ltrP").mouseenter(function(){ // Mouseenter event on the given object (.ltrP)
        var goTo = $(this).css("marginTop") == '0px' ? 170 : 0; // When the current margin-top is 0px animate to 170px, otherwise animate it back to 0px
        $(this).stop(true,false).animate({ // Changed the stop(true, true) to stop(true, false), looks nicer in my opinion
            marginTop: goTo // Animate to the just set variable
        }, 1000);
    });

});

И посмотрите здесь демо: http://jsfiddle.net/hnDmt/

(И замедление «easeInBounce» у меня не работало, поэтому я его удалил. (Может быть, замедление пользовательского интерфейса jQuery?))

person Lumocra    schedule 12.07.2012
comment
Спасибо Люмокра! Я выбрал этот ответ, потому что он кажется очень гибким для работы с другими ситуациями и хорошо известен для будущих потребностей / советов по обучению. - person Commandrea; 12.07.2012

arrow_upward
1
arrow_downward

Вы можете переписать свой код следующим образом:

$(document).ready(function(){
    init();
});
function init() {
    $.hover(function(){
        $(".ltrP").stop(true, true).animate({
            marginTop:"170px"
        }, 
        {
            duration: 1000,
            easing: "easeOutBounce"
        });
    },
    function(){
        $(".ltrP").stop(true, true).animate({
            marginTop: "0px"
        },
        {
            duration: 1000,
            easing: "easeInBounce"
        });   
    });
}
person Praveen Kumar Purushothaman    schedule 12.07.2012

arrow_upward
1
arrow_downward

Есть много способов сделать это. Возможно, проще всего концептуализировать добавление класса к анимированному элементу. Вы хотите написать две отдельные функции mouseenter.

Для первой функции запустите анимацию вниз и добавьте класс к введенному элементу. Назовите класс "moveddown" или что-то очевидное.

Затем напишите вторую функцию mouseenter. Когда элемент с классом выбран мышью, анимируйте его и удалите класс.

Забудьте о jQuery hover для этого. Это просто оболочка для mouseenter/mouseleave. Это может вызвать проблемы. Документы jQuery предупреждают об этом. Обычно лучше писать функции mouseenter и mouseleave отдельно, особенно когда вы пытаетесь сделать что-то сложное, например это.

person Ben    schedule 12.07.2012