根據值更改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

Answer 2

您的匿名函數僅被調用一次，因此“ mr”僅被計算一次，因此，當調用附加到按鈕的函數時，它使用的是設置為200的全局變量。即使在移動之后，mr變量仍為200，因為您從未更新過該變量。

imtheman在我輸入時似乎已經回答了這個問題，但是他是對的，將mr變量定義放入函數中，以便每次單擊按鈕時都會計算一次，而不是在運行javascript時進行計算。