Question

我正在使用JQuery让我的.wrapper div在移动到margin-top后重新回到原来的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值的地方），即使转换为字符串？我不想使用静态价值作为我的保证金顶部。

如果您想查看应用代码，请点击此处。 http://codepen.io/myleschuahiock/pen/zqvvNZ

任何帮助表示赞赏！谢谢！

编辑：我将点击功能更改为$（'。go-back'），但magin-top的动画应该仍然相同

Answer 1

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

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

Answer 2

这样做。您的动画部分中存在一些错误。margin-top应该正确为marginTop并且您的字符串应该转换为int并执行此操作。我将作为示例实现。这将对您有所帮助。

＆＃13;

<!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>

＆＃13;

注意：

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

int此部分将margin-top值作为字符串。

var vaL = parseInt(one,10);

将其转换为整数。

然后是动画部分

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

使用var无效的JQuery动画margin-top

2 个答案: