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

Answer 2

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

imtheman好像已经回答了这个，因为我输入了这个，但他是对的，将mr变量定义放在函数中，以便每次单击按钮时计算它，而不是运行javascript时的一次。< / p>

根据值更改jquery.animate

2 个答案: