0

marign-top プロパティを使用して div をアニメーション化したいと考えています。最初は margin-top:10% に設定されています。クリックすると、marign-top が 5% に減少し、次の div とそのコンテンツが表示されます (toggle() を使用)。

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


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

それは問題なく動作しますが、「#login」を再度クリックしたときに最初の「margin-top:10%」に戻すにはどうすればよいですか?

4

2 に答える 2

0

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%
  }
}
于 2013-07-31T08:52:17.347 に答える
0

CSS3 では、トランジション プロパティを使用していくつかの一般的なアニメーションを実行できます。例えば

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

そして、要素のマージントップスタイルを直接設定します（jqueryを使用しているため）

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

その後、アニメーションが自動的に適用されます。この「線形」アニメーションは、幅、高さ、背景色など、ほとんどの CSS の変更に影響を与えることができます。

于 2013-07-31T08:44:31.017 に答える