jQuery單擊事件動畫後增加css屬性的值

我想要從底部出現並淡入底部的效果，它基於元素的屬性margin-top，但我沒有得到I想。它在第一時間正常工作，淡入和淡出。但是當我第二次執行它時，該屬性的值比它應該大10px。每當我點擊以顯示並淡出時，當我再次點擊時，它的顯示比上一次多10px。我應該做什麼不會增加此值？代碼在上面。請有人幫助我！謝謝。jQuery單擊事件動畫後增加css屬性的值

$(document).on("click",".nav-menu",function(){ 
    var $initial_margin_top = $(".w-clearfix.nav-menu-ul").css("margin-top"); 
    var $margin_num = parseInt($initial_margin_top.split("px")[0]) + 10; 
    if($(this).hasClass("nav-menu-hover")){ 
     $(".w-clearfix.nav-menu-ul").animate({"margin-top": $margin_num+"px","opacity":"0"}); 
     $(".w-clearfix.nav-menu-ul").css({"margin-top": $initial_margin_top}); 
     $(this).removeClass("nav-menu-hover"); 
    }else if(!$(this).hasClass("nav-menu-hover")){ 
     $(this).addClass("nav-menu-hover"); 
     $(".w-clearfix.nav-menu-ul").css({"margin-top": $margin_num+"px" ,"opacity":"0"}); 
     $(".w-clearfix.nav-menu-ul").removeClass("hide"); 
     $(".w-clearfix.nav-menu-ul").animate({"margin-top": $initial_margin_top,"opacity":"1","margin-left":"-1px"}); 
     $(".w-clearfix.nav-menu-ul").css({"margin-top": $initial_margin_top}); 
    } 
});

來源

2013-11-26 Jaqueline Passos

你會創建這個代碼的[JsFiddle]（http://jsfiddle.net）嗎？很難理解其他問題 – Ibu

您可能需要添加If statememt以檢查是否已添加10。 – cubrr

你的問題在於這行代碼：

var $margin_num = parseInt($initial_margin_top.split("px")[0]) + 10;

每次你的導航菜單項被點擊時，初始值由10增加，因爲這是你的點擊處理程序中。

爲了防止發生這種情況，請在點擊功能之外申報一次。

來源

2013-11-26 19:50:53

我改變了代碼，只有當我使用它的時候才增加值，'$（「.w-clearfix.nav-menu-ul」）。animate（{「margin-top」：（$ margin_num + 10）+「px 」，「不透明度」：「0」}）; '和變量$ margin_num只接收元素的margin-top值。但仍然無法正常工作... –

會發生什麼情況是，如果您使用jQuery設置動畫，則您的元素實際CSS會發生變化。現在，如果您考慮自己的代碼，每次點擊時，都會爲您的margin-top + 10設置動畫效果。因此，下次單擊時，您的變量$ inital_margin_top將設置爲此新的頂級值（舊的+10）。這就是爲什麼它繼續添加10. 現在，爲了防止這種情況，正如我所說的，確保在您的點擊處理程序之外聲明初始值。這樣，該值被設置爲一次，並且永不改變。然後，您可以隨時在您的點擊處理程序中使用它來重置您想要動畫的元素。祝你好運！ –

哦，如果你真的想使用流暢的動畫，試着看看CSS3轉換。有一些方法可以使用硬件加速來使您的動畫方式比使用JavaScript更流暢。這裏有一個開始的鏈接：http://www.w3schools.com/css/css3_transitions.asp –

這行是你的問題：

var $margin_num = parseInt($initial_margin_top.split("px")[0]) + 10;

的問題是，你每次增加值，而不將其復位。您需要以某種方式存儲原始值並在每次運行此功能時恢復爲原始值。

首先想到的是將原始值存儲在要更改的元素內的屬性中，併爲其命名爲'data-num'。所以你可以舉例：

<div width="50px" data-num="50px"></div>

祝你好運。

來源

2013-11-26 19:50:24 RealityDysfunction

我改變了代碼，只有當我使用它的時候才增加數值，'$（「.w-clearfix.nav-menu-ul」）。animate（{「margin-top」：（$ margin_num + 10）+「px 」，「不透明度」：「0」}）; '和變量$ margin_num只接收元素的margin-top值。但仍然無法正常工作... –

如果只在使用時增加值，則仍然會出現同樣的問題;您需要在每次運行時將該值重置爲默認值。 – RealityDysfunction

jQuery單擊事件動畫後增加css屬性的值

回答

相關問題