Question

我正在尝试使用fadeIn和fadeOut制作旋转木马但是第一张图片淡出而下一张图片只是在之后出现。我希望顺利过渡。我还根据我从Codecademy学到的内容构建了这段代码。我无法确定出了什么问题。我正在使用Bootstrap。

HTML：

        <div class = "slidingPhotos" align="center">
            <div class = "slide active-item">
                <div class = "photo1">
                    <img src = "Images/mainImage.jpg"></img>
                </div>
                <div class = "description">
                    <h3> Welcome to O-Grocery! Your #1 Online Grocery Store </h3>
                </div>
            </div>
            <div class = "slide ">
                <div class = "container">
                    <div class = "photo1">
                        <img src = "Images/mainImage3.jpg"></img>
                    </div>
                    <div class = "description">
                        <h3> You have a thousand products to choose from at O-Grocery! </h3>
                    </div>
                </div>
            </div>
            <div class = "slide">
                <div class = "container">
                    <div class = "photo1">
                        <img src = "Images/mainImage2.jpg"></img>
                    </div>
                    <div class = "description">
                        <h3> You can guarantee 100% freshness of goods! </h3>
                    </div>
                </div>
            </div>
        </div>

        <div class ="footer" align="center">
            <div class = "dots">
                <div class = "arrow-prev">
                    <a href ="#"><img src = "Images/arrow-prev.png"></img></a>
                </div>
                <ul class="slider-dots">
                    <li class="dot active-dot">&bull;</li>
                    <li class="dot">&bull;</li>
                    <li class="dot">&bull;</li>
                </ul>
                <div class = "arrow-next">
                    <a href ="#"><img src = "Images/arrow-next.png"></img></a>
                </div>
            </div>
        </div>

JQuery的

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

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

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

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

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

Answer 1

通过fadeIn和fadeOut的动画是异步的，因为你同时启动两个动画，当第一件事淡出时，第二件事已经完成淡入。你基本上只是需要以某种方式强制延迟第二个动画，或者通过确保在第一个动画完成后调用它，或者知道jQuery中的slow速度是600毫秒。（来源：http://api.jquery.com/animate/）

您可以使用.animate()更好地控制动画，但在这种情况下，您也可以在第一个动画之后使用setTimeout()伪造它，以确保它可以在第二个动画开始之前完成。

您可以直接从答案中运行此示例：

＆＃13;

$('.arrow-next').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();

    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();

    if(nextSlide.length === 0) {
      nextSlide = $('.slide').first();
      nextDot = $('.dot').first();
    }

    currentSlide.fadeOut('slow').removeClass('active-slide');
    setTimeout(function(){ nextSlide.fadeIn('slow').addClass('active-slide'); }, 300);

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
  });

＆＃13;

.slide { display: none; }
.slide.active-item {display:block;}
img {display:none;}
a {display:inline-block;background-color:#666;color:#fff;padding: 15px;margin:10px;}
.dots div {display:inline-block; }
.slidingPhotos { height: 55px; width: 500px; margin-bottom: 10px; display:block;background-color: #ccc; }
.slide { position: absolute; top: 10; height: 55px; width: 500px; text-align: center; color:Blue;font-family:"Segoe UI",Arial,"sans serif"; font-size:14px;}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<div class = "slidingPhotos">
            <div class = "slide active-item active-slide">
                <div class = "photo1">
                    <img src = "Images/mainImage.jpg"></img>
                </div>
                <div class = "description">
                    <h3> Welcome to O-Grocery! Your #1 Online Grocery Store </h3>
                </div>
            </div>
            <div class = "slide ">
                <div class = "container">
                    <div class = "photo1">
                        <img src = "Images/mainImage3.jpg"></img>
                    </div>
                    <div class = "description">
                        <h3> You have a thousand products to choose from at O-Grocery! </h3>
                    </div>
                </div>
            </div>
            <div class = "slide">
                <div class = "container">
                    <div class = "photo1">
                        <img src = "Images/mainImage2.jpg"></img>
                    </div>
                    <div class = "description">
                        <h3> You can guarantee 100% freshness of goods! </h3>
                    </div>
                </div>
            </div>
        </div>

        <div class ="footer" align="center">
            <div class = "dots">
                <div class = "arrow-prev">
                    <a href ="#">PREVIOUS<img src = "Images/arrow-prev.png"></img></a>
                </div>
                <div class = "arrow-next">
                    <a href ="#">NEXT<img src = "Images/arrow-next.png"></img></a>
                </div>
            </div>
        </div>

＆＃13;

Answer 2

您可以不在函数异步的同时观察fadeOut和fadeIn的效果：

currentSlide.fadeOut('slow').removeClass('active-slide'); <-|
nextSlide.fadeIn('slow').addClass('active-slide');        <-| starts together

将animate()与step选项一起使用。 step可以为每个动画元素的每个动画属性接受回调函数。此函数提供了修改Tween对象的机会，以便在设置之前更改属性的值。

JQuery fadeIn不使用fadeOut

2 个答案: