Question

我想要改變div的margin-top。

通常我會因此這爲這樣：

$("#mydiv").animate({ marginTop: '+='+myvar}, 200); 

但這始終增加（或減少）的值。我想要一種簡單的方法來改變中的值。

例如：如果div開始時的margin爲100，myvar值爲50我想動畫div使其縮回到50.同樣，如果myvar值是200，我想動畫改變長到200

我能實現這個有點，但重置CSS，如：

$("#mydiv").css("margin-top", "0px"); 
$("#mydiv").animate({ marginTop: '+='+myvar}, 200); 

每次但是這使得它有點笨重。

有沒有人知道可以做到這一點？

（PS：不使用CSS轉換）

編輯：添加我的代碼如下

$("#info1tab").click(function() { 
    $(".textbox").slideUp('200'); 
    $("#info1").delay(300).slideDown('200'); 
    var itemheight = $("#info1").css("height"); 
    var itemheightint = parseInt(itemheight); 
    $("#photobox").animate({ marginTop: itemheightint }, 200); 

}); 

$("#info2tab").click(function() { 
    $(".textbox").slideUp('200'); 
    $("#info2").delay(300).slideDown('200'); 
    var itemheight = $("#info2").css("height"); 
    var itemheightint = parseInt(itemheight); 
    $("#photobox").animate({ marginTop: itemheightint }, 200); 

}); 

Answer 1

什麼是錯的$('#mydiv').animate({marginTop: myvar});？

http://jsfiddle.net/muVsE/

Answer 2

創建您想要的CSS屬性，然後做額外的CSS類：

$("#mydiv").addClass("classname", 1000); 

OR

$("#mydiv").removeClass("classname", 1000); 

Answer 3

試試這個代碼：

$("#mydiv").css("margin-top", "0px"); 
$("#mydiv").animate({ marginTop: topMargin+myvar}, 200); 

Answer 4

我希望這有助於JSFiddle

$('#left-bg, #right-bg').click(
    function(){ 
     $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600); 
    }); 

或者你可以用這個JSfiddle

$('#left-bg, #right-bg').click(
    function(){ 
     $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600); 
     $('<button class="show">Show all</button>') 
      .appendTo('#wrapper'); 
    }); 

    $('.show').live('click', 
        function(){ 
         $('#left-bg').animate(
          { 
           'width': '50%' 
          },600); 
         $('#right-bg').animate(
          { 
           'width': '50%' 
          },600); 
         $(this).remove(); 
        }); 

或者你可以用它來擴大一個DIV，並在同一時間縮水等：

$('.cell') 
    .on('mouseenter', function(){ 
     $(this).animate ({width:"75%"},"slow").siblings('.cell').animate({'width': '15%'}, "slow"); 
    }) 
    .on('mouseleave', function(){ 
     $(this).add($(this).siblings('.cell')).animate ({width:"45%"},"slow"); 
    }); 

問候。