jQuery基础6-动画效果

最新推荐文章于 2022-11-18 19:38:06 发布

shenroom

最新推荐文章于 2022-11-18 19:38:06 发布

阅读量150

点赞数 1

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/qq_41772754/article/details/88083503

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.jQuery效果操作

基本
show([s,[e],[fn]]) 显示隐藏的匹配元素。
hide([s,[e],[fn]]) 隐藏显示的元素
toggle([s],[e],[fn]) 切换显示/隐藏

滑动
slideDown([s],[e],[fn]) 高度由0增大到原本高度来显示
slideUp([s,[e],[fn]]) 高度逐渐变为0来隐藏
slideToggle([s],[e],[fn]) 切换显示/隐藏(高度变化)

淡入淡出
fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],o,[e],[fn]]) 指定目标透明度的淡入淡出
fadeToggle([s,[e],[fn]]) 切换淡入淡出

s: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
e: (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn: 在动画完成时执行的函数，每个元素执行一次。
o: 一个0至1之间表示透明度的数字。

<html>
<p style="width:200px;height: 100px;background: red;"></p>
<button id="bt1">显示</button>
<button id="bt2">隐藏</button>
<button id="bt3">切换</button>
</html>
<script>
$("#bt1").click(function(){      //点击后p显示,即设置 display:block;
    $("p").show();
})
$("#bt2").click(function(){      //点击后p隐藏,即设置 display:none;
    $("p").hide();
})
$("#bt3").click(function(){      //点击，p来回切换显示/隐藏,
    $("p").toggle("fast");
})   
$("p").hide("fast");    //p的宽高在200毫秒内同时减小到0，然后设置 display:none;       
$("p").hide(1000);      //p的宽高在1000毫秒内同时减小到0，然后设置 display:none; 
$("p").hide(1000,function(){   //当p隐藏后弹出1(在p宽高都为0时，在display:none之前执行)
  alert(1)
});         
$("p").hide(1000,"linear",function(){    //整个过程是匀速的
  alert(1)
});
//其它使用同理, 注：无论怎样的方式，在元素看不见后都会添加属性 display:none;
</script>

自定义
animate(p,[s],[e],[fn]) 1.8*创建自定义动画
stop([c],[j]) 1.7*停止所有在指定元素上正在运行的动画。
delay(d,[q]) 设置一个延时来推迟执行队列中之后的项目。
finish([queue]) 1.9+停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。

p: 一组包含作为动画属性和终值的样式属性和及其值的集合
s: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
e: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn: 在动画完成时执行的函数，每个元素执行一次。
c: 默认false,如果设置成true，则清空队列。可以立即结束动画。
j: 默认false,如果设置成true，则完成队列。可以立即完成动画。
d: 延时时间，单位：毫秒
q: 队列名词,默认是Fx,动画列队

<html>
<p style="width:200px;height: 100px;background: red;"></p>
<button id="bt1">显示</button>
<button id="bt2">隐藏</button>
<button id="bt3">切换</button>
</html>
<script>
$("#bt1").click(function(){                     //点击按钮后，1000毫秒内，p宽变为100，高变为50
   $("p").animate({width:100,height:50},1000);
})
$("p").animate({marginLeft:"500px"},1000);               //所有指定的属性必须用骆驼形式
$("p").animate({marginLeft:"500px"},1000,"linear");      //匀速执行
$("p").animate({marginLeft:"500px"},1000,"linear",function(){
     alert(1);                                           //执行完毕后弹出 1
}); 
$("#bt1").click(function(){                     //每次点击按钮后，p的宽度增加50px
   $("p").animate({width:"+=50px"},1000);
})
//累加写法：
$("div").animate({ width:"+=200" },500)    //每次宽度增加200
//关键字写法： 
$("div").animate({ width:"hide" },500)     //即宽度为0 (其他关键字：toggle)
$("p").stop();               //停止p正在执行的动画，如果是列队动画则立刻执行后列动画。
$("p").stop(true);           //停止p的所有动画，p的状态保留在此一刻。
$("p").stop(true, true);      //停止p的所有动画，p的状态立刻变为该列动画最终形态(不是最后列的最终形态)。
$("p").finish();             //停止p的所有动画，p的状态立刻变为整列动画最终形态(即最后列的最终形态)。
$("p").hide().delay(1000);   //延迟1000毫秒执行hide()

//1.立即停止当前，继续执行后续动画
$("div").stop();
$("div").stop( false );
$("div").stop( false, false );

//2.立即停止当前和后续所有的动画
$("div").stop( true );
$("div").stop( true, false );

//3.立即完成当前的，继续执行后续的动画
$("div").stop( false, true );

//4.立即完成当前的，并停止后续所有的动画
$("div").stop( true, true );
</script>

注：良好的书写习惯，开启动画之前先清除所有动画,防止产生BUG:

设置

jQuery.fx.off 关闭页面上所有的动画。
jQuery.fx.interval 设置动画的显示帧速。


//例如当动画执行因浏览器版本问题造成页面混乱时可使用：
 jQuery.fx.off=true;        //关闭页面所有动画，直接变成动画最终形态
 jQuery.fx.off=false;       //开启所有动画

//设置动画的显示帧速：
 jQuery.fx.interval=50;      //将帧速设为50，帧速默认值为13，值越小对浏览器的性能要求越高

队列控制
queue(e,[q]) 显示或操作在匹配元素上执行的函数队列
dequeue([queueName]) 从队列最前端移除一个队列函数，并执行他
clearQueue([queueName]) 清空对象上尚未执行的所有队列

e: 检查附加列队的DOM元素
q: 字符串值，包含序列的名称。默认是 fx, 标准的效果序列。
queueName: 队列名，默认为fx

列队控制举例：

<html>
<p style="width:200px;height: 100px;background: red;"></p>
<button id="bt1">显示</button>
<button id="bt2">隐藏</button>
<button id="bt3">切换</button>
</html>
<script>
$("div").animate({width:"200px"}).css("background","blue"); 
 //由于css()不是动画会先执行，所以div先变为蓝色再执行动画

//解决办法1：使用回调函数
$("div").animate({width:"200px"},function(){
    $(this).css("background","blue")                //先执行动画，最后变蓝色
}); 

//解决办法2：使用queue()
$("div").animate({width:"200px"}).queue(function(){
    $(this).css("background","blue")                 //先执行动画，最后变蓝色
}); 

//先执行动画，然后变蓝色，再执行下一个动画 (新版本写法)
$("div").animate({width:"200px"}).queue(function(next){
    $(this).css("background","blue");               
    next();
}).animate({height:"100px"}); 

//先执行动画，然后变蓝色，再执行下一个动画 (旧版本写法)
$("div").animate({width:"200px"}).queue(function(){
    $(this).css("background","blue");               
    $(this).dequeue();
}).animate({height:"100px"});

//列队动画个数，停止操作
$("#bt1").click(function(){ 
   $("div").animate({width:"200px"});      //动画1：宽度变为200px
   $("div").animate({height:"100px"});     //动画2：高度变为100px

   $("div").queue(function () {            //动画3：(queue算一个动画)
        var n=$("div").queue("fx"); 
        alert(n.length);                   //中途弹出：3 (剩余列队个数)
        $(this).dequeue();
   });

   $("div").fadeOut();                     //动画4：淡出
   $("div").slideDown();                   //动画5：淡入

   var n=$("div").queue("fx"); 
   alert(n.length);                        //最先弹出：5 (共5列动画)
})

$("#bt2").click(function(){                            
    $("div").queue("fx", []);                //清空列队，正在执行的此列动画会执行完       
    $("div").stop();                         //停止动画，停在此刻状态
})

//使用clearQueue()清除后面列队动画
$("div").animate({width:"200px"}).queue(function(){
    $(this).css("background","blue");               
    $(this).clearQueue();
}).animate({height:"100px"});        //变蓝色后便停止，后面的不执行
</script>

jQuery基础1-简介、语法

jQuery基础2-选择器

jQuery基础3-筛选（过滤、查找、串联）

shenroom

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础6-动画效果

1.jQuery效果操作基本show([s,[e],[fn]]) 显示隐藏的匹配元素。hide([s,[e],[fn]]) 隐藏显示的元素toggle([s],[e],[fn]) 切换显示/隐藏滑动slideDown([s],[e],[fn]) 高度由0增大到原本高度来显示slideUp([s,[e],[fn]]) 高度逐渐变为0来隐藏slideToggle([s],[e],[fn...
复制链接

扫一扫

专栏目录