JQuery fadeIn无法使用fadeOut

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

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

你可以直接从答案运行这个例子：

$('.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');
  });

.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;}

<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>

当函数异步时，您可以不同时观察fadeOut和fadeIn的影响：

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

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