Как перехватить переход непрозрачности в jQuery? - PullRequest
Новая
       48

Как перехватить переход непрозрачности в jQuery?

1 голос
/ 22 октября 2011

У меня есть следующий скрипт наведения, который работает на моих изображениях навигационной ссылки: 

$("nav a").hover(
    function() {
        $(".current", this).animate({
            opacity: 1
        }, {
            duration: 300,
            specialEasing: {
                opacity: 'linear',
            },
});
    }, function() {
        $(".current", this).animate({
            opacity: 0
        }, {
            duration: 2000,
            specialEasing: {
                opacity: 'linear',
            },

});
});

Мне интересно, есть ли способ перехватить анимацию, если пользователь перемещает курсор из div hover, а затемвернуться в него до того, как закончится оригинальная анимация.Если пользователь переместит курсор обратно в div, я бы хотел, чтобы анимация немедленно уменьшала непрозрачность изображения в .current div до 1.

Надеюсь, это понятно и буду рад любой помощи.

Спасибо,

Ник

Ответы [ 2 ]

2 голосов
/ 22 октября 2011

Вы можете использовать функцию jQuery stop() (информация) для отмены анимации. Измените первую строку функции ввода на эту: 

    $(".current", this).stop().animate({

Это останавливает анимацию и немедленно возвращает непрозрачность 1.

0 голосов
/ 22 октября 2011

Способ, которым я достиг чего-то подобного в прошлом, заключается в сохранении ссылки на наведенные элементы в объекте, отключенной с помощью некоторого идентификатора, связанного с элементом, над которым наведен курсор.

Например: 

var hoveredElements = {previousId:null};
$("nav a").bind("mouseover mouseout",function(e) {
           if(e.type == "mouseover")
           {

              if(!hoveredElements.hasOwnProperty(this.id))
              {
                 hoveredElements[this.id] =  $(".current", this).animate({opacity:  1},300);
                 hoveredElements.previousId = this.id;
              }
              else if(hoveredElements.previousId == this.id)
              {
                if(hoveredElements.hasOwnProperty(this.id))
                {
                    hoveredElements[this.id].stop().css({opacity:1});
                } 
                else
                {
                  hoveredElements[this.id] = $(".current", this).css({opacity:1});
                }
              }
           }
           else
           {
             if(hoveredElements.hasOwnProperty(this.id))
             {
                 hoveredElements[this.id].animate({opacity:  0},2000,function(){
                    delete hoveredElements[this.id];
                 });
             }
           }
});

Конечно, идентификатор не обязательно должен быть идентификатором HTML, просто какой-то уникальный идентификатор (может быть сам элемент).

Редактировать: Извините, не совсем понял исходный вопрос!

...