.stop() ломает fadein, а желтый прямоугольник не отображается правильно

Question

Если я больше всего на красном поле быстро и оставьте курсор над красным полем, он просто перестанет затухать и разрывает операцию пополам. Если я вообще не использую функцию .stop(), jquery пытается закончить оставшиеся операции (которые я навешивал и выходил из окна раньше) Кто-нибудь знает, что мне здесь делать? Благодарю.

http://jsfiddle.net/dkLhC/1

$(document).ready(function(){ 
    $(".box1").mouseenter(function(){ 

    $(".box2").stop().fadeIn(); 
    }); 
    $(".box1").mouseleave(function(){ 
    $(".box2").stop().fadeOut(); 
    }); 
}); 

Answer 1

После некоторых исследований я обнаружил, что правильный ответ

true, false (для параметров clearQueue, jumpToEnd)

http://jsfiddle.net/q6d57/11/

$(document).ready(function(){ 
    $(".box1").mouseenter(function(){ 
    $('.box2').stop(true, false).fadeIn(3000); 
    }); 
    $(".box1").mouseleave(function(){ 
    $('.box2').stop(true, false).fadeOut(3000); 
    }); 
}); 

Answer 2

JSFiddle

JQuery функция fadeTo() также, кажется, работает как CSS переходы, но переходы, несомненно, лучший выбор.

$(document).ready(function(){ 
    $(".box1").mouseenter(function(){ 
    $(".box2").stop().fadeTo(1000, 1); 
    }); 
    $(".box1").mouseleave(function(){ 
     $(".box2").stop().fadeTo(1000, 0); 
    }); 
}); 

Answer 3

Использование .finish():

DEMO

$(document).ready(function(){ 
    $(".box1").mouseenter(function(){ 
    $(".box2").finish().fadeIn(); 
    }); 
    $(".box1").mouseleave(function(){ 
    $(".box2").finish().fadeOut(); 
    }); 
}); 

Answer 4

Это не прямой ответ на вашу проблему, но альтернативное решение. Вместо JQuery, вы можете использовать CSS transition сделать замирание в и

.box2 
{ 
    opacity: 0; 
    transition: opacity 2s; 
} 

.box1:hover + .box2 { 
    opacity: 1; 
    transition: opacity 2s; 
} 

См JSFiddle