javascript - 在点击时创建切换

Question

我试图在 jQuery 中单击一个链接，然后其中的内容从屏幕右侧进入 0px。然后，当您再次单击它时，它会关闭，这是一种切换效果。

我当前的 jQuery 是:

$('.bet-slip-outer').click(function() {
    // Responsive Stuff...
    var windowwidth = $(window).width();

    $('.bet-slip').animate({
        'right': '-240px'
    });
}, function() {
    $('.bet-slip').animate({
        'right': '0px'
    });
});

然而，当我点击 .bet-slip 时，right:-240 似乎优先。

我做错了什么？

干杯

Answer 1

有条件的:

定义正确的样式。

<div class="bet-slip" style="right:0px;"></div>

j查询

$('button').click(function() {
    if($('.bet-slip').css('right') === '0px' ){
        $('.bet-slip').animate({'right':'-240px'});
    } else {
        $('.bet-slip').animate({'right':'0px'});
    }
});

其他

唯一样式:

$('button').click(function(){
    $('div').toggleClass('right');
});

div{
	position:relative;
	width:100px;
	height:10px;
	background:green;
	right:-100px;
	transition:1s;
}
.right{
	right:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    
</div>
<button>
    f
</button>