Question

我已经使用了fadeIn / fadeOut 在悬停时我想获得fadein-＆gt;停止效果，然后在鼠标移出时重新启动动画无法弄明白:(

HTML：

<style>
div{
width:300px;
height:300px;
background-color:black;  
}
</style>

<div>
</div>

这是js代码：

function fade(){
$('div').fadeIn(2000, function(){
   $('div').fadeOut(2000, fade());                           
    })
}

fade();

$('div').hover(function(){
    $('div').fadeIn({duration:100, queue:false}).stop(true, true);
},function(){
    fade();
});

这是一个JsFiddle链接：
http://jsfiddle.net/5Zqcu/55/

感谢您的帮助

Answer 1

我修改了fiddle

function fade(){
    $('div').fadeIn(2000, function(){
       $('div').fadeOut(2000, fade);                           
    })
}

fade();

$('div').hover(function(){
    $('div').stop(true);
},function(){
    fade();
});

Answer 2

你需要在做animate / fadeIn之前停止：

function fade(){
    $('div').fadeIn(2000, function(){ 
       $('div').fadeOut(2000, fade);                           
    })
}
fade();

$('div').hover(function(){
    $(this).stop().animate({opacity:1},100);
},function(){
    fade(); 
});

Answer 3

似乎你想要某种脉冲元素，它会逐渐消失，直到你将它鼠标悬停在那里它应该变得完全不透明。您最好使用fadeTo作为fadeIn，而fadeOut通常会将起始不透明度视为显示的不透明度。

此外，您不需要使用回调来排列下一个动画，您可以将它们串在一起，因为它们会自动排队到fx队列。如果要停止动画，则需要使用stop(true)，如果使用stop()，则会停止当前动画，但会启动下一个动画。

function fade() {
    $("div").fadeTo(2000, 0).fadeTo(2000, 1, fade);
}

fade(); // Start throbbing

$("div").hover(function() {
    // You want to clear the queue but not call the complete callback
    // and then rapidly fade in
    $(this).stop(true).fadeTo(100, 1);
}, fade);

这是更新的小提琴http://jsfiddle.net/5Zqcu/66/

Answer 4

超短的同样的事情：

$('div').on('mouseenter').stop(true).fadeTo(100,1)
   ._.on('mouseleave').repeat().fadeTo(2000,0).fadeTo(2000,1,$)
   ._.mouseleave();

此示例http://jsfiddle.net/creativecouple/rLcqD/使用一点plugin jquery-timing作为短语法。

Jquery fadeIn循环停止，但在停止不工作之前完成淡入

4 个答案: