尝试使用jQuery fadeIn / fadeOut实现不透明度动画

Question

我用CSS制作这个小提琴。

http://jsfiddle.net/Q5cRU/

我正在尝试使用jQuery fadeIn/fadeOut来实现完全动画。 （没有不透明度和动画）

与stop() and finish()一起使用的

fadeIn/fadeOut函数无效，因为如果我快速移动光标，则只需隐藏或显示该框。

感谢。

Answer 1

您必须在jQuery动画中使用stop()来模拟CSS动画。

它有以下参数，.stop( [clearQueue ] [, jumpToEnd ] )，你想要的是清除队列，但不要跳到最后，所以它是stop(true, false)

$('.box1').on('mouseenter mouseleave', function(e) {
    $('.box2').stop(true, false).animate({opacity: e.type=='mouseenter'? 1 : 0}, 1500)
});

FIDDLE

或没有不透明度

$('.box1').on('mouseenter mouseleave', function() {
    $('.box2').stop(true, false).fadeToggle(1500)
});

FIDDLE

Answer 2

你好。

http://jsfiddle.net/defmetalhead/Q5cRU/2/

    $(".box1").on({ 
        mouseover: function() {
            $('.box2').stop().fadeIn('slow');
        },
        mouseleave: function() {
            $('.box2').stop().fadeOut('slow');
        }
    });