点击底部并返回原始位置动画div

Question

I am trying to move a div to a certain position. The following piece of code works fine:

$('#image1').click(function() {
  $('#div1').animate({
  'marginTop' : "+=160px" 
  });
});

However, I would like to animate the div to its original position once the image1 is clicked again. Does anybody have an easy to use idea for this? Thanks

Answer 1

You can use a class with css transition for this. Example code -

HTML

<div class="main">
    Hello
</div>

CSS

.main {
  background: green;
  width: 100px;
  height:100px;
  margin-top:0px;
  transition: margin-top 1s;
}

.set_margin {
  margin-top:100px;
}

jQuery

$('.main').on('click', function() {
    $(this).toggleClass('set_margin'); // toggle class on click event
})

You can implement it like -

$('#image1').click(function() {
    $('#div1').toggleClass('set_margin');
});

Fiddle

Answer 2

Another way:

 function firstClick() { $('#div1').animate({ 'marginTop' : "380px" }); $(this).one("click", secondClick); } function secondClick() { $('#div1').animate({ 'marginTop' : "0px" }); $(this).one("click", firstClick); } $("#image1").one("click", firstClick); 

 #div1 { width: 200px; height: 200px; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="image1">image1</div> <div id="div1"></div> 

Answer 3

You can add class to #img! its clicked first time, and remove on the second time, using is as an indicator of dive being clicked. Example:

$('#image1').click(function() {
  if($('#image1').hasClass("clicked")){
      $('#div1').animate({
         'marginTop' : "-=160px" 
      });
      $('#image1').removeClass("clicked");
  }
  else{
    $('#image1').addClass("clicked");
        $('#div1').animate({
         'marginTop' : "-=160px" 
      });
  }
});

Answer 4

One more way

 var toggle = true; $('#image1').click(function() { if (toggle) { $('#div1').animate({ 'marginTop': "+=160px" }); toggle = false; } else { $('#div1').animate({ 'marginTop': "-=160px" }); toggle = true; } }); 

 #div1 { height: 50px; width: 50px; background: black; border-radius: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="image1">Toggle</button> <div id="div1"></div> 

Answer 5

Here and example with codepen live editor

 var move = true $('#image1').click(function() { if (move) { $('#div1').animate({ 'margin-left': "+=160px" }, move = false); } else { $('#div1').animate({ 'margin-left': "0px" }, move = true); } }); 

 #image1 { width:100px; height:100px; background:red; cursor:pointer } #div1 { width:100px; height:100px; background:green; margin-left:0px; } 

 <div id="image1">ClickMe</div> <div id="div1"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 6

By using toggleClass we can achieve this animation.

<style type="text/css">
    .animation{
        margin-top:160px;
    }
</style>
<script type="text/javascript">

 $(document).ready(function(){
    $('#image1').click(function(){
        $('#div1').toggleClass("animation");
    })
 })
</script>

Here is JsFiddle link animate