Javascript 根据值更改jquery.animate

单击

按钮.btn

时，

div.img-box

将随动画移动。
我想根据div.img-box的位置更改动画 首先单击按钮，它会集体移动。
第二次单击，右边距为10px的图像不会移动
我有这个密码

js

html

---

如何修复它？

您需要放入

var mr=parseInt（$（'.img-box'）.css（'margin-right'），10）在
单击（）函数中

$(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' );
        };
    });
});

您的匿名函数只被调用一次，因此“mr”只被计算一次，因此当调用要附加到按钮的函数时，它使用的全局变量设置为200。即使在它移动之后，mr变量仍然是200，因为您从未更新过该变量

imtheman似乎在我输入时回答了这个问题，但他是对的，将mr变量定义放入函数中，以便在每次单击按钮时计算它，而不是在javascript运行时计算一次

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

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

$(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' );
        };
    });
});