jQuery FadeOut 淡入答案

【问题标题】：jQuery FadeOut FadeInjQuery FadeOut 淡入
【发布时间】：2015-06-14 08:46:38
【问题描述】：

我在搞乱 html、css 和 jquery，我遇到了这个问题。我有一个幻灯片，它使用淡入和淡出从容器中获取图像，但是当我按“下一步”时，它会重置页面并在底部某处加载下一个图像。你能告诉我有什么问题吗？

HTML

<div class="slideshow ">
<div class="container">
<div class="slides">
<img class ="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg">
<img class ="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg">
<img class ="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg">
<img  class="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW">
</div>
</div>



<div class="container ">
<ul class="slider-dots">
<a href="#/" class="arrow-prev"><<</a>
    <li class="dot active-dot">&bull;</li>
    <li class="dot">&bull;</li>
    <li class="dot">&bull;</li>
    <li class="dot">&bull;</li>
<a href="#/" class="arrow-next">>></a>
</ul>
</div>
</div>

jquery

var main=function(){
$('.arrow-next').click(function(event){
    event.stopPropagation();
    var currentSlide=$('.active-slide');
    var nextSlide=$('.active-slide').next();

    var currentDot=$('.active-dot');
    var nextDot=currentDot.next();

    if(nextSlide.length==0) {nextDot=$('.dot').first(); nextSlide=$('.slide').first();}

    currentSlide.fadeOut().removeClass('active-slide');
    nextSlide.fadeIn().addClass('active-slide');

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');


}); 

$('.arrow-prev').click(function(event){
    event.stopPropagation();
    var currentSlide=$('.active-slide');
    var prevSlide=currentSlide.prev();

    var currentDot=$('.active-dot');
    var prevDot=currentDot.prev();

if(prevSlide.length==0) {prevDot=$('.dot').last(); prevSlide=$('.slide').last();}

    currentSlide.fadeOut().removeClass('active-slide');
    prevSlide.fadeIn().addClass('active-slide');

    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');

});

};

$(document).ready(main);

你可以在这里看到这一切 fiddlehttp://jsfiddle.net/1zLd58yo/

【问题讨论】：

请发布您的代码，而不是只是一个jsfiddle
event.defaultPrevented 不是您停止默认行为的方式。可能在 api.jquery.com/event.stoppropagation 之后，或者只是在处理程序结束时返回 false。
它具有相同的行为。我怀疑不知何故，css中的显示规则与它有关。
为避免重排，您的幻灯片（甚至 display:none）可能应该是 position: absolute 以便所有幻灯片都在同一个位置
是的，但它会弄乱容器，我真的不希望它这样做。

标签： jquery fadein fadeout

【解决方案1】：

看起来你有一个淡出然后一个淡入。淡出后，图像消失，然后出现一个新图像。淡出后有重绘/发生。

应用以下 CSS 规则来解决您的问题。

在 div.slides 上， - 设置固定的宽度和高度 - 将位置设置为相对

在图片上， - 设置位置=绝对

【讨论】：

当按钮被点击时，在当前图片下产生的图片呢？你觉得你有什么想法吗？
重绘没有出现，但是图像向右移动了一些量，我希望它会留在我的 div 中。我将修改小提琴以显示结果。
如果你将位置设置为绝对，所有的图像将在彼此的后面，所以下面不会产生。
是的，它可以工作，但是图像被移动了，它们不限制在幻灯片 div/ 容器内。
一定和.slideshow的宽高有关

【解决方案2】：

将 div 幻灯片设置为特定高度，然后在fadeOut 之后添加将fadeIn 放入函数中，这样可以确保高度不会变得太大。这样您就可以避免将位置设置为绝对位置。

currentSlide.fadeOut().removeClass('active-slide', function(){
    prevSlide.fadeIn().addClass('active-slide');
});

第一张幻灯片将完全淡出，然后下一张将淡入。

【讨论】：