分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了为什么在中断fadeOut()后使用jQuery fadeIn()不起作用？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

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

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

解决方法

你是对的.你可以在firebug中跟踪这个.在淡出结束时,他将不透明度设置回他开始的值,并显示：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,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);
});