jQuery Animate - как остановить функцию наведения курсора, как только функция зависания выключена (не завершайте функцию наведения курсора)

#jquery #hover #jquery-animate

#jquery #наведите #jquery-анимация

Вопрос:

У меня есть область навигации по меню, где я использую .animate для перемещения текста при наведении курсора мыши, а затем сдвиньте его обратно при наведении курсора мыши. Я хотел бы иметь возможность немедленно остановить анимацию слайдов, как только мышь будет наведена на вкладку. Как я могу это сделать?

 $('a.menu').hover(
    function(){
        if(!$(this).hasClass('current'))
            $(this).animate({'padding-right': ' =10'});
    },
    function(){
        if(!$(this).hasClass('current'))
            $(this).animate({'padding-right': '-=10'});
    }       
);

Ответ №1:

Используйте stop() метод

 $('a.menu').hover(
    function(){
        if(!$(this).hasClass('current'))
            $(this).stop().animate({'padding-right': ' =10'});
    },
    function(){
        if(!$(this).hasClass('current'))
            $(this).stop().animate({'padding-right': '-=10'});
    }       
);

1. Хорошо, что это работает. Единственная проблема заключается в том, что если она отключена до того, как достигнет = 10 пикселей, то функция выключения при наведении курсора все равно удалит 10 пикселей. (т. Е. Если текст достигает 6 пикселей, и я отключаю наведение курсора, функция выключения курсора по-прежнему перемещается на 10 пикселей вправо, а не только на 6)

2. хм … вы делаете что-нибудь еще? потому что padding:-n обрабатывается как padding:0 . (В CSS не может быть отрицательного заполнения). Например: jsfiddle.net/XFbf5

Ответ №2:

Вы можете использовать метод stop для остановки анимации, но это не будет хорошо работать с относительными значениями. Вам нужно изменить их на абсолютные значения, чтобы не останавливать их на полпути, а затем анимировать обратно после начального значения.