jQuery动画效果

jQuery动画效果

1.显示动画

• 无参数,让指定的元素显现出来,底层通过display:block实现

  •    $("div").show();

• 通过控制元素的宽高,透明度,display属性,逐渐显示,例如3秒后显示完毕

  •  $('div').show(3000);

  • 参数

    • slow 慢:600ms

    • normal 正常 400ms

    • fast 快:200ms

  • 动画执行完毕后立即执行回调函数

    •   //show(毫秒值，回调函数;
           $("div").show(5000,function () {
               alert("动画执行完毕！");
           );

2.隐藏动画

•      $(selector).hide();
   ​
       $(selector).hide(1000); 
   ​
       $(selector).hide("slow");
   ​
       $(selector).hide(1000, function(){});

3.开关式显示隐藏动画

•  $('#box').toggle(3000,function(){});

• 显示和隐藏的拉回切换采用的是toggle()方法,就是先执行show(),再执行hide()

•      $('#btn').click(function(){
               $('#box').toggle(3000,function(){
                   $(this).text('盒子出来了');    
                   if ($('#btn').text()=='隐藏') {
                       $('#btn').text('显示');    
                   }else{
                       $('#btn').text('隐藏');    
                   }
               });
           })

4.滑入和滑出

• 滑入,下拉动画,显示元素

  •  $(selector).slideDown(speed, 回调函数);

• 滑出,上拉动画,隐藏元素

  •  $(selector).slideUp(speed, 回调函数);

• 滑入滑出动画效果切换

  •  $(selector).slideToggle(speed, 回调函数);

5.淡入淡出效果

• 淡入动画效果,

  •   $(selector).fadeIn(speed, callback);

• 淡出动画效果

  •  $(selector).fadeOut(1000);

• 淡入淡出动画效果来回切换

  •   $(selector).fadeToggle('fast', callback);

6.自定义动画

•   $(selector).animate({params}, speed, callback);

• 作用:执行一组CSS属性的自定义动画

  • 第一个参数:要执行动画的CSS属性(必选)

  • 第二个参数:执行动画的时长:可选

  • 第三个动画:动画执行完毕后,立即执行的回调函数(可选)

7.停止动画

•  $(selector).stop(true, false);

• 参数说明

  • 第一个参数:true表示后续动画不执行,false表示后续动画执行

  • 第二个参数:true表示立即执行完成当前动画,false表示立即停止当前动画

  • 如果参数都不写,默认两个参数都是false,实际常用的是stop(),