JQuery 使用 var 设置 margin-top 动画无效

Question

我正在使用 JQuery 让我的 .wrapper div 在移动到 margin-top 后快速回到其原始 margin-top。原始边距顶部取决于浏览器高度。我试图通过将原始 margin-top 值存储到一个变量中来实现这一点，并在我想要 .wrapper div 稍后恢复时将其用于 JQuery 动画。

$(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 不接受我的变量（存储原始 margin-top 值的地方），即使转换为字符串？我不接受想使用静态值作为我的 margin-top。

如果你想查看应用代码，就在这里。 http://codepen.io/myleschuahiock/pen/zqvvNZ

感谢任何帮助！谢谢！

EDIT: I changed the click function to $('.go-back'), but the animate for magin-top should still be the same

Answer 1

将整个$(".title").click(function(){})移动到$(document).ready(function(){})

问题存在是因为在 $(".title").click(function(){}) 初始化时 originalMargin 还没有设置，因为 document 还不是 ready。

Answer 2

这样做。你的动画部分有一些错误。margin-top 应该是正确的 marginTop 并且你的字符串应该转换为 int 并且像 this.I 一样实现为 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();

在这部分获取字符串形式的 margin-top 值。

var vaL = parseInt(one,10);

将其转换为整数。

然后是动画部分

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

JQuery 使用 var 设置 margin-top 动画无效

JQuery animate margin-top using var not working

html

javascript

css

jquery

jquery-animate