jQuery get / toggle类和动画if

时间:2013-08-09 20:51:11

标签: jquery if-statement jquery-animate

仍在学习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 intewebz的无限知识权力:)

1 个答案:

答案 0 :(得分:3)

您可以使用.hasClass()检查是否有课程。

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