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

Question

当用户做某事时,我想要淡入淡出.我希望在事件发生时淡出它.如果用户做某事,我想再次将其淡入(并在事件发生时再次淡出).

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

点击"Click Me"几次(要么允许时间显示元素,要么消失,否则它似乎没有区别).每次,fadeIn都会使元素稍微减少.我想让它在每次用户点击时淡化元素.

这与它有关stop().似乎记得在fadeIn停止的那一刻,它有一定的不透明度,并认为这种不透明度是不透明度的完全褪色.当你再来fadeIn时,它会消失到"记忆"的不透明度,但是没有到达那里,因为它是停止的,这使得它记住不透明度作为完全褪色的不透明度等等.

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

Answer 1

你是对的.你可以在firebug中跟踪这个.在淡出结束时,他将不透明度设置回他开始的值,也是display: none.你可以通过设置不透明度来解决这个问题,1或者更好地设置''(对于IE)fadeOut完成时.

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

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

更新了小提琴

编辑

我修改了代码以使用您的评论.您可以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);
});

小提琴

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

小提琴