click - 如何通过单击为 div 的 marginTop 设置动画

Question

我想用它的marign-top属性为一个div设置动画。最初它设置为margin-top：10%。点击它，将margin-top减少到5%，并显示下一个div及其内容（使用toggle（））。

#login
{
margin:10% auto;
......
}


$("#login").click(function()
{   
  $( "#outer_wrapper" ).toggle( "clip",300);
  $("#login").animate({marginTop:'5%'});
}

这很好用。但是当再次点击“#login”时如何回到初始的“margin-top:10%”？

Answer 1

如果您只使用 jQuery：

$("#login").click(function() {   
  if($('#login').css('margin') == '10%'){       // check if has 10% margin atm.
    $( "#outer_wrapper" ).toggle( "clip",300);  // if true => apply the 5% margin
    $("#login").animate({marginTop:'5%'});
  } else {
    // whatever you also want to do here...
    $("#login").animate({marginTop:'10%'});     // otherwise apply the 10%
  }
}

Answer 2

在 CSS3 中，您可以使用过渡属性来制作一些常见的动画。例如

.test{
   -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
}

然后直接设置元素的margin top样式（就像你使用jquery一样）

$('.test').css('margin-top','5%');

然后它会自动应用动画。这种“线性”动画可以对大多数 CSS 更改生效，例如宽度、高度、背景颜色等。