JQuery animate()与removeClass()结合时不能正常工作

JQuery animate() not working as intended in conjunction with removeClass()

本文关键字：常工作 不能 工作 结合 animate removeClass JQuery      更新时间：2023-09-26

我一直在尝试实现我自己的carousel作为一种自学javascript的方式，并遇到了一个问题，在我的removeClass调用之前的动画没有发生，但引入下一个元素的动画按预期工作。

我意识到这听起来很模糊，所以我用jsfiddle重现了我的问题:http://jsfiddle.net/f57N3/

我还包括了下面的相关代码。任何帮助将非常感激!

HTML: 

<div class="button-container">
    <button id="b2">Next</button>
</div>
<div class="container">
    <div class="box active-box" id="box1">
        thingy
    </div>
    <div class="box" id="box2">
        other thingy
    </div>
    <div class="box" id="box3">
        another thingy
    </div>
</div>
CSS: 

.box{
    display: none;
    position: relative;
    opacity: 0;
    width: 350px;
    height: 200px;
    background-color: blue;
    color: white;
    border: 5px solid black;
}
.active-box{
    display: block;
    opacity: 1;
}
.container{
    width: 850px;
    height: 500px;
    margin: 0px auto;
    background-color: #003399;
}
Javascript: 

// Functionality for 'Next' button
$("#b2").click(function(){
    var thisBox = $(".active-box");
    var nextBox = thisBox.next();
    if(nextBox.length == 0){
        nextBox = $(".box").first();
    }
    // Set pre-animation conditions
    thisBox.css("margin-left", "0px");
    thisBox.css("opacity", "1");
    // Animate this box and remove active class
    thisBox.animate({marginLeft: "-=300px", opacity: "0"}, 800).removeClass("active-box");
    //Set pre-animation conditions
    nextBox.css("margin-left", "300px");
    nextBox.css("opacity", "0");
    // Animate this box and add active class
    nextBox.animate({marginLeft: "-=300px", opacity: "1"}, 800).addClass("active-box");
});

任何帮助都将非常感激!

Animate有一个可以传递给它的complete函数http://api.jquery.com/animate/

发生的是removeClass直接射击。只有complete中的removing似乎能解决这个问题。同时，将下面的内容移到其中，使其运行更流畅。

// Functionality for 'Next' button
$("#b2").click(function () {
    var thisBox = $(".active-box");
    var nextBox = thisBox.next();
    if (nextBox.length == 0) {
        nextBox = $(".box").first();
    }
    // Set pre-animation conditions
    thisBox.css("margin-left", "0px");
    thisBox.css("opacity", "1");
    // Animate this box and remove active class
    thisBox.animate({
        marginLeft: "-=300px",
        opacity: "0"
    }, 800, 'swing', function () {
        thisBox.removeClass("active-box");
        //Set pre-animation conditions
        nextBox.css("margin-left", "300px");
        nextBox.css("opacity", "0");
        // Animate this box and add active class
        nextBox.animate({
            marginLeft: "-=300px",
            opacity: "1"
        }, 800).addClass("active-box");
    })
});

演示:http://jsfiddle.net/robschmuecker/f57N3/1/

你可以这样做:

Javascript: 
$("#b2").click(function(){
var thisBox = $(".active-box");
var nextBox = thisBox.next();
if(nextBox.length == 0){
    nextBox = $(".box").first();
}
// Set pre-animation conditions
thisBox.css("margin-left", "0px");
thisBox.css("opacity", "1");
// Animate this box and remove active class
thisBox.animate({marginLeft: "-=300px", opacity: "0"}, 800);
thisBox.removeClass("active-box");
//Set pre-animation conditions
nextBox.css("margin-left", "300px");
nextBox.css("opacity", "0");
// Animate this box and add active class
nextBox.animate({marginLeft: "-=300px", opacity: "1"}, 800);
nextBox.addClass("active-box");
});
相关文章：