Animating a div by clicking down and back to its original position

Question

I am trying to move a div to a specific position. The following code snippet works fine:

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

However, I would like to animate the div to its original position after clicking image1 again. Does anyone have an easy to use idea for this? Thanks

Answer 1

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>

Run codeHide result

Answer 2

You can use classc for this css transition. Code Example -

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

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

Fiddle

Answer 3

#img! , . :

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

Answer 4

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>

Hide result

Answer 5

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>

Hide result

Answer 6

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 the JsFiddle link to animate