JQuery的動畫邊緣頂部使用var不工作

我使用jQuery讓我的.wrapper div在移動到margin-top後回到原來的margin-top。原始頁邊距取決於瀏覽器高度。我試圖通過將原始margin-top值存儲到一個變量中，並在我想讓.wrapper div稍後回滾時將它用於JQuery動畫。JQuery的動畫邊緣頂部使用var不工作

$(document).ready(function() { 
//Adjust .wrapper Margin-top to adjust position to 1/4 of Window Broswer Height 
var marginWindowSpace = ($(window).height())/4; 
$(".wrapper").css("margin-top", marginWindowSpace); 

var originalMargin = $(".wrapper").css("margin-top").toString(); 
}); 

$(".title").click(function() { 
    $("#results-container").empty(); 
    $(".wrapper").animate({ 
    'margin-top': originalMargin 
    }, 200); 
    $(".title-tag, .or, .random-article, .random-article-underline").fadeIn(500); 
    $("footer").addClass("footer-pos1"); 
});

問題：爲什麼不會我有生的margin-top接受我的變量（其中原邊距值存儲），甚至當轉換成字符串？我不想使用靜態值作爲我的保證金。

如果您想查看應用程序代碼，它就在這裏。 http://codepen.io/myleschuahiock/pen/zqvvNZ

任何幫助表示讚賞！謝謝！

編輯：我改變了點擊功能$，但magin頂的動畫應該還是一樣

來源

2016-03-06 myleschuahiock

移動整個$(".title").click(function(){})到（「去背。」）存在$(document).ready(function(){})

的問題，因爲在該$(".title").click(function(){})originalMargin初始化的時候並沒有被設定，因爲document不是ready尚未。

來源

2016-03-06 04:25:33 WcPc

這樣做。你的動畫部分有一些錯誤。 margin-top應該是正確的marginTop和你的字符串應該轉換爲int並且像這樣做。我將以example.hope的形式實現，這將對您有所幫助。

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<title>Test</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
</head> 
 
<style type="text/css"> 
 
body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div.testing{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: orange; 
 
    margin-top: 100px; 
 
} 
 

 
div.two{ 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
    position: 
 
} 
 

 
</style> 
 
<body> 
 

 
<div class="testing"></div> 
 
<br><br> 
 
<h3 class="clk">Click me!</h3> 
 
<div class="two"></div> 
 

 
<script type="text/javascript"> 
 
$(document).ready(function(){ 
 
    var one = $(".testing").css("margin-top").toString(); 
 
    var vaL = parseInt(one,10); 
 

 
    $(".clk").click(function(){ 
 
    $(".two").animate({'marginTop':vaL+'px'},1000); 
 
    }); 
 
}); 
 

 
</script> 
 

 

 
</body> 
 
</html>

注：

var one = $(".testing").css("margin-top").toString();

INT這部分得到margin-top值作爲一個字符串。

var vaL = parseInt(one,10);

將其轉換爲整數。

那麼動畫部分

$(".two").animate({'marginTop':vaL+'px'},1000);

來源

2016-03-06 04:51:24

JQuery的動畫邊緣頂部使用var不工作

回答

相關問題