jQuery 获取/切换类和动画 if

Question

仍在学习 dem jQueries 并发现另一个问题 - 我想从侧面重新创建一个经典的反馈面板/幻灯片。

HTML

<div id="foobar" class="slide closed">
            <img class="slidebutton" src="img/slide.png" alt="slide">

            <div id="slidetext">
                <p>slide me out</p>
            </div>
    </div>

jQuery

$(document).ready(function() {
$(".slidebutton").click(function () {
    $('#foobar').toggleClass("open closed");

    if $('#foobar').attr('class') returns 'closed' {
        $( "#foobar" ).animate({ "left": "+=200px" }, "slow" );
    }
    else {
        $( '#foobar' ).animate({ "right": "+=200px" }, "slow" );
    });
});

});

如果我在没有 if 语句的情况下测试切换，它会起作用，所以我假设我在考虑动画时犯了一个错误？

欢迎 ze interwebz 的无限知识力量:)

Answer 1

您可以使用.hasClass()检查它是否有一个类。

if($('#foobar').hasClass('closed'))
{
    $( "#foobar" ).animate({ "left": "+=200px" }, "slow" );
}
else
{
    $( '#foobar' ).animate({ "right": "+=200px" }, "slow" );
}