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

Posted 2023-05-08

【中文标题】如何通过单击为 div 的 marginTop 设置动画

【英文标题】：how to animate marginTop of a div with click

【发布时间】：2013-07-31 16:32:56

【问题描述】：

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

#login

margin:10% auto;
......



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

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

【参考方案1】：

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

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

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

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

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

【参考方案2】：

如果你只使用 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%