Question

我想用它的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％”？

Answer 1

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

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

然后直接设置元素的边距顶部样式（因为您正在使用jquery）

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

然后它将自动应用动画。这种“线性”动画可以对大多数css变化生效，例如宽度，高度，背景颜色等。

Answer 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%
  }
}

如何通过点击动画一个div的marginTop

2 个答案: