CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
myleschuahiock
myleschuahiock

Reputation: 303

JQuery animate margin-top using var not working

I'm using JQuery to have my .wrapper div snap back to its original margin-top after being moved to margin-top. The original margin-top is dependent on browser height. I'm trying to do this by storing the original margin-top value into a variable, and using it for JQuery animate when I want to .wrapper div to snap back later on.

$(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");
});

QUESTION: Why wont my the animate margin-top accept my variable (where the original margin-top value is stored), even when converted to string? I don't want to use a static value as my margin-top.

If you want to see the app code, it's here. http://codepen.io/myleschuahiock/pen/zqvvNZ

Any help is appreciated! Thanks!

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

Upvotes: 0

Views: 834

Answers (2)

caldera.sac
caldera.sac

Reputation: 5088

Do like this. there are some errors in your animate part.margin-top should be correct as marginTop and your string should convert as int and do like this.I implement as an example.hope this will help to you.

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

note :

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

int this part get the margin-top value as a string.

var vaL = parseInt(one,10);

convert it to an integer.

then the animate part

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

Upvotes: 0

WcPc
WcPc

Reputation: 457

Move the whole $(".title").click(function(){}) into the $(document).ready(function(){})

The problem exists because at the time of the initialisation of the $(".title").click(function(){}) originalMargin is not set yet because the document is not ready yet.

Upvotes: 1

Related Questions