javascript - 根据值更改 jquery.animate

Question

当点击button.btn时，div.img-box会随着动画移动。
我想根据 div.img-box 的位置更改动画。

首先，我单击按钮，它会集体移动。
第二次单击时，margin-right 现在为 10px 的图像不会移动。
我有这个代码。

js

$(function(){
    var mr = parseInt($('.img-box').css('margin-right'), 10);
    $(".btn").click(function(){
        if (mr == 10) {
            $(".img-box").animate( { marginRight: '300px' }, 'slow' );
        } else {
            $(".img-box").animate( { marginRight: '10px' }, 'slow' );
        };
    });
});

html

<button class="btn"></button>
<div class="img-box"><img src="xxx.png"></div>

CSS

.img-box{
    float: right;
    width: 250px;
    height: 350px;
    margin: 200px 25%;
}

如何修复它？

Answer 1

您需要将 var mr = parseInt($('.img-box').css('margin-right'), 10); 放入 click() 函数。

$(function(){
    $(".btn").click(function(){
        var mr = parseInt($('.img-box').css('margin-right'), 10);
        if (mr == 10) {
            $(".img-box").animate( { marginRight: '300px' }, 'slow' );
        } else {
            $(".img-box").animate( { marginRight: '10px' }, 'slow' );
        };
    });
});

JSFiddle