animate

English[??n??met]

vt. ??? ????;

adj? ??? ????;

jquery ?????() ??? ???

??: animate() ???? CSS ?? ??? ??? ?? ?????? ?????. ? ??? CSS ???? ?? ??? ? ???? ?? ??? ?????. CSS ?? ?? ????? ???? ????? ??? ?? ? ????. ?? ?? ??????? ? ????(?: "??:30px"). ??? ?? ??????? ? ????(?: "???:???"). ?? ?????? ???? "+=" ?? "-="? ?????.

?? 1: $(selector).animate(styles,speed,easing,callback)

????:

??


?? 2: $(selector).animate(styles,options)

????:

ParametersDescription
styles ?? . ????? ??? ???? CSS ???? ?? ?????.
?? ????. ?????? ??? ?????. ???? "??"???. ??? ?: ???(?: 1500) "??" "??" "??"
easing ?? ??. ??? ????? ???? ????? ??? ???? ?? ??? ?????. ??? ?? ??: ?? ?? ???? ? ?? ?? ??? ?????.
????. animate ??? ??? ? ??? ?????.
???? ??
??? ?????. ????? ??? ???? CSS ???? ?? ?????(?? ??).
options????. ?????? ?? ?? ??? ?????. ??? ?: speed - ????? ?? ?? easing - ??? easing ??? ?????. callback - ?????? ??? ? ??? ??? ?????. step - ?????? ? ??? ??? ? ??? ??? ?????. - ?? ?. ?????? ?? ???? ???? ??? ?????. false? ?? ?????? ?? ?????. SpecialEasing - ??? ????? ?? ?? ??? CSS ?? ?? ?? ?? ??

jquery ?????() ??? ?

<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
  {
  $(".btn1").click(function(){
    $("#box").animate({height:"300px"});
  });
  $(".btn2").click(function(){
    $("#box").animate({height:"100px"});
  });
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
</body>
</html>
???? ?? ?

??? ????? ??? "???? ??" ??? ?????