Блог

-Итак, у меня есть эти 2 тега разделения.

 <div id="div1">Hover me to show Div2</div>
<div id="div2">Div2</div>
  

-я установил непрозрачность div2 в 0 в CSS

-я хочу, чтобы при наведении курсора div2 его непрозрачность менялась с 0 на 1

-Итак, я поместил это в jQuery

 $("#div2").mouseenter(function(){
    $("#div2).fadeTo("fast", 1);
});
  

-и при наведении курсора он возвращается к 0

 $("#div2").mouseleave(function(){
    $("#div2).fadeTo("fast", 0);
});
  

-это работает отлично, но моя проблема в том, что при наведении курсора div2 более одного раза анимация ставится в очередь, и она будет выполнять анимацию наведения снова и снова

-я хочу, чтобы при повторном наведении курсора div2 предыдущая анимация была остановлена и была создана новая

как мне это сделать?

Я не могу использовать переход CSS3, потому что мне нужно запустить его на IE9, заранее спасибо, вот JSFiddle

Вы можете сделать это так:

 $(document).ready(function(){
    $("#div2").mouseenter(function(){
        $("#div2").stop( true, true ).fadeTo("fast", 1)
    });

    $("#div2").mouseleave(function(){
        $("#div2").stop( true, true ).fadeTo("fast", 0)
    });
});
  

JSFIDDLE: http://jsfiddle.net/d8MQb/3 /

Описание : http://api.jquery.com/stop /

используйте .stop() :

 $("#div2").stop().fadeTo("fast", 0);
  

и вам не нужно использовать # здесь:

 <div id="div2">Div2</div>
  

Ваша скрипка

Используйте jQuery clearQueue: http://api.jquery.com/clearqueue /

 $(document).ready(function(){
    $("#div2").mouseenter(function(){
        $("#div2").clearQueue().fadeTo("fast", 1)
    });

    $("#div2").mouseleave(function(){
        $("#div2").clearQueue().fadeTo("fast", 0)
    });
});
  

Пример JSfiddle: http://jsfiddle.net/d8MQb/2 /