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

问题描述

| 我有一些想要在用户执行某些操作时淡入的内容。我想在事件发生时淡出它。如果用户执行了某项操作，我想再次使其淡入（并再次在事件发生时使其淡出）。 以我的jsfiddle为例。在这种情况下，我想在用户单击\“ Click Me \”时淡入\“ fadeP \”标记。我有一个setTimeout再次淡出它（而不是我的事件监听器）。淡入完成之前将触发超时。它将停止fadeIn（也清除动画队列）和fadeOut。如果用户再次单击\“ Click Me \”（可能在fadeOut完成之前），则我想将\“ fadeP \”标记淡入。 多次单击“单击我”（允许元素有时间出现和消失，这似乎没有什么不同）。每次，fadeIn都会使元素的淡入度略微降低。我希望它每次用户单击时都使元素褪色。 与ѭ0do有关。似乎记得在淡入淡出停止时，它具有一定的不透明度，并认为此不透明度是完全不透明度的淡入度。当您再次淡入淡出时，它会淡化为“已记住”的不透明度，但不会到达那里，因为它已停止，这使它记住了不透明度，因为不透明度完全消失了，依此类推。 当事件触发并淡出时，我需要它来停止fadeIn。当事件触发并淡入时，我需要它来停止fadeOut。我需要使用fadeIn来尝试每次都淡化为相同的不透明度。有任何想法吗？     

解决方法

        你是对的。您可以在Firebug中对此进行跟踪。在淡出结束时，他将不透明度设置回其初始值，即“ 1”。您可以解决此问题，方法是在完成

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);
});

更新的小提琴 编辑 我已修改代码以处理您的评论。您可以自己对ѭ6进行动画处理，以从当前值开始。

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,500);
});

小提琴 编辑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);
});

小提琴