fadeOut (on an li) stops working after using addClass on div that wraps the ul

梦想的初衷 提交于 2019-12-13 02:40:31

问题


I'm working on a "slider". I have a main ul for the main content (e.g., images), as well as a second ul for a thumbnail carousel. Click a thumb (or a prev / next) and I transitions from the current li (read index) to the clicked li using this line:

cacheMainImagesList.siblings('li').eq(currentIndex).fadeOut(opts.imageOutDuration, function(){cacheMainImagesList.eq(displayThisIndex).fadeIn(opts.imageInDuration)});

I'm not acting on the images themselves because I'm shooting for a content slider and not just an image slider. That said, I'm wanting to have a full screen mode. Click a button and the images will fill the screen.

To do the full-screen, I'm adding a class to the outer most wrapper. That class is defined as position: fixed, left:0, top:0. (Note: I don't think this detail matters but what the heck.) The leap to full screen work. It's basically the same uls just wrapped up and CSS'ed slightly different.

However, the line of code above stops working. I'm not getting an error. Specifically, the fadeOut simply stops working. The fadeIn works but for some reason the fadeOut doesn't. In short, the slides stop "sliding", then just pile up. I can go forward in the index, 2, 3, 4, etc. But when I try to go back the currentIndex never does the fadeOut.

Finally, I tried to force it with a hide() but then there's a "flash" of sorts. I also don't want the instant effect of hide. Even if it's a super fast fade, that's still more pleasing.

Anyone have any clues? Obviously, I do not. Thanks.

Perhaps this will help: jsfiddle.net/chiefalchemist/UvpGN/5 Please see comment below about this working. That is, it doesn't reproduce the broke fadeOut.

Let me break it down to its most basic level...The fadeOut and fadeIn are operating on on the same selector / object in the same line of code. It's a matter of two different indexs being changed. Why does fadeout not work but fadeIn does? That's why I'm stumped.

来源:https://stackoverflow.com/questions/11438556/fadeout-on-an-li-stops-working-after-using-addclass-on-div-that-wraps-the-ul

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!