目录

jQuery 实现简单的动画

1、显示/隐藏

2、向上收缩/向下展开

3、淡入/淡出

4、自定义动画

jQuery 实现简单的动画

1、显示/隐藏

    
      (1)显示&＃xff1a;show(speed,[callback])

speed:效果时长。可取的值&＃xff1a;slow、fast、毫秒数callback:过渡完成后&＃xff0c;所执行的方法名称

      (2)隐藏&＃xff1a;hide(speed,[callback])
      
      (3)交替&＃xff1a;toggle(speed,[callback]),若&＃39;显示&＃39;则&＃39;隐藏&＃39;;若&＃39;隐藏&＃39;则显示

//搭建结构显示图片隐藏图片交替显示隐藏

2、向上收缩/向下展开

    
      (1)收缩&＃xff1a;slidUp(speed,[callback])
      
      (2)展开&＃xff1a;slidDown(speed,[callback])
      
      (3)交替&＃xff1a;slidToggle(speed,[callback])

$(&＃39;#btn_up&＃39;).bind(&＃39;click&＃39;,function(){$(&＃39;#img2&＃39;).slideUp(); //展开})$(&＃39;#btn_down&＃39;).bind(&＃39;click&＃39;, function () {$(&＃39;#img2&＃39;).slideDown(); //收缩})$(&＃39;#btn_slide&＃39;).bind(&＃39;click&＃39;, function () {$(&＃39;#img2&＃39;).slideToggle(); //收缩展开交替})

 3、淡入/淡出

    
      (1)淡入&＃xff1a;fadeIn(speed,[callback])
      
      (2)淡出&＃xff1a;fadeOut(speed,[callback])

      (3)淡入淡出交替&＃xff1a;fadeToggle(speed,[callback])

$(&＃39;#btn_fadeIn&＃39;).bind(&＃39;click&＃39;, function () {$(&＃39;#img3&＃39;).fadeIn(); //淡入})$(&＃39;#btn_fadeOut&＃39;).bind(&＃39;click&＃39;, function () {$(&＃39;#img3&＃39;).fadeOut(); //淡出})$(&＃39;#btn_fade&＃39;).bind(&＃39;click&＃39;, function () {$(&＃39;#img3&＃39;).fadeToggle(2000); //淡入淡出交替})

4、自定义动画

$(selector).animate(params,[speed],[easing],[fn])

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值&＃xff1a;"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。 

$(function(){$(&＃39;button&＃39;).click(function(){$(&＃39;.bt&＃39;).animate({left:200,top:150,opacity:0.4},1000)})})