Question

我一直在尝试实现自己的轮播作为一种自学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");
});

非常感谢任何帮助！

Answer 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");
});

Answer 2

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

发生的事情是removeClass正在直接射击。 removing中只有complete似乎可以解决这个问题。同时将以下内容移入其中会使其运行更顺畅。

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

JQuery animate（）无法与removeClass（）一起工作

2 个答案: