Question

当用户做某事时，我想要淡入淡出。我希望在事件发生时淡出它。如果用户做某事，我想再次将其淡入（并在事件发生时再次淡出）。

查看my jsFiddle的示例。在这种情况下，当用户单击“Click Me”时，我想淡入“fadeP”标记。我有一个setTimeout来淡出它（而不是我的事件监听器）。超时将在fadeIn完成之前触发。它将停止fadeIn（也清除动画队列）和fadeOut。如果用户再次单击“Click Me”（可能在fadeOut完成之前），我想重新淡入“fadeP”标记。

点击“Click Me”几次（要么允许时间显示元素，要么消失，这似乎没有什么区别）。每次，fadeIn都会使元素稍微减少。我想让它在每次用户点击时淡化元素。

这与stop()有关。似乎记得在fadeIn被停止的那一刻，它有一定的不透明度，并认为这种不透明度在不透明度上是完全褪色的。当你再次出现淡入淡出时，它会消失在“记忆中”的不透明度，但是不会到达那里，因为它是停止的，这会使它记住不透明度作为完全褪色的不透明度等等。

我需要它来在事件触发和fadeOut时停止fadeIn。我需要它来在事件触发和淡入时停止fadeOut。我需要fadeIn尝试每次都淡入相同的不透明度。有什么想法吗？

Answer 1

你是对的。你可以在firebug中跟踪这个。在淡出结束时，他将不透明度设置回他开始的值以及display: none。您可以在1完成后将不透明度设置回''或更好地设置为fadeOut（对于IE）来解决此问题。

fadeP = $('#fadeP');
clickMe = $('#clickMe');

clickMe.click(function(){
    fadeP.stop(true).fadeIn(1000);
    setTimeout(function(){
        fadeP.stop(true).fadeOut('300', function() {
            $(this).css('opacity', '');
        });
    }, 500);
});

Updated fiddle

修改

我修改了代码以处理您的评论。您可以自己为opacity设置动画，以便从当前值开始。

fadeP = $('#fadeP');
clickMe = $('#clickMe');

clickMe.click(function(){
    var currentOpacity = fadeP.css('opacity');
    fadeP.stop(true).show().css('opacity', (currentOpacity  < 1) ? currentOpacity  : 0 ).animate({opacity: 1});
    setTimeout(function(){
        fadeP.stop(true).fadeOut(5000, function() {
            $(this).css('opacity', '');
        });
    }, 500);
});

fiddle

编辑2

与OP合作的最终解决方案; - ）

clickMe.click(function(){
    if(fadeP.css('display') == 'none') fadeP.css('opacity', '0');
    fadeP.stop(true).show().animate({opacity: 1}, 1000, function () { $(this).css('opacity', ''); } );
    setTimeout(function(){
        fadeP.stop(true).fadeOut(1000);
    }, 500);
});

fiddle

为什么在中断fadeOut（）后使用jQuery fadeIn（）不起作用？

1 个答案:

修改

编辑2