Question

我试图将div移动到某个位置。以下代码可以正常工作：

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

然而，一旦再次点击image1，我想将div设置为原始位置的动画。有没有人有一个易于使用的想法？感谢

Answer 1

您可以将class与css transition一起使用。示例代码 -

<强> 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
})

您可以像 -

那样实现它

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

Fiddle

Answer 2

另一种方式：

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

您可以将课程添加到#img！它第一次点击，第二次删除，使用is作为潜点击的指示。例如：

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

Answer 4

另一种方式

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

这里和codepen实时编辑器的例子

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

通过使用toggleClass，我们可以实现这个动画。

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

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

这是JsFiddle链接animate

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

6 个答案: