jquery - 为什么 jQuery fadeIn() 在中断 fadeOut() 之后使用时不起作用？

Question

我想在用户执行某些操作时淡入一些内容。我想在事件发生时将其淡出。如果用户执行某些操作，我想再次将其淡入(并在事件发生时再次将其淡出)。

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

多次单击“Click Me”(无论是否允许元素出现和消失，似乎都没有什么区别)。每次，fadeIn 都会稍微减少元素的淡入度。我希望它在用户每次单击时淡入元素。

这与 stop() 有关。它似乎记得在淡入停止时，它具有一定的不透明度，并认为这种不透明度是完全淡出的不透明度。当您再次进入淡入时，它会淡入“记住的”不透明度，但不会到达那里，因为它已停止，这导致它记住该不透明度为完全淡出的不透明度等等。

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

Answer 1

你是对的。您可以在 firebug 中跟踪它。在淡出结束时，他将不透明度设置回开始时的值，并且 display: none。您可以通过在 fadeOut 完成时将不透明度设置回 1 甚至更好的 ''(对于 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

编辑

我已修改代码以处理您的评论。您可以自己设置不透明度的动画以从当前值开始。

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