JQuery动画

最新推荐文章于 2024-05-07 19:24:40 发布

木易一

最新推荐文章于 2024-05-07 19:24:40 发布

阅读量285

点赞数 1

分类专栏： JQuery

本文链接：https://blog.csdn.net/weixin_43684713/article/details/90666183

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.动画效果的显示与隐藏

show(speed,[callback]) 显示

hide(speed,[callback]) 隐藏

上面方法中参数speed表示执行动画时的速度，可以自定义，单位为毫秒，可以使用默认字符“slow”、“normal”、“fast”,其对应速度分别为“0.6秒”、“0.4秒”、“0.2秒”；可选参数[callback]为在动画完成时执行的回调函数

示例：

<script>
 //show() 显示 hide() 隐藏 参数1  动画的时间  参数2指动画
    $("#btn1").click(function(){
        $(".block1").hide(1000);
    });
    $("#btn2").click(function(){
        $(".block1").show(1000);
    });
    $("#btn1").click(function(){
        $(".block1").hide(1000,function(){
            alert("消失了")
        })
    });
</script>

在使用show()或hide()方法显示或隐藏页面元素时，为了正确执行切换显示的动作，通常需要检测当前元素的显示状态，然后根据该状态再执行元素是否显示或隐藏。这样一来，代码会很长，可以使用toggle()方法，该方法的功能就是切换元素可见状态，即如果是显示状态，则变成隐藏状态；如果是隐藏状态，则变成显示状态。

<script>
 $("#btn3").click(function(){
        $(".block1").toggle(1000,function(){
            alert("你好")
        })
    });
</script>

2.滑动效果

slideUp()方法功能为上滑，slideDown()方法功能为下滑，slideToggle()方法功能为通过使用滑动效果（高度变化）来切换元素的可见状态。

<script>
 $("#btn4").click(function(){
        $(".block2").slideUp();//上滑
        $(".block2").slideDown();//下滑
        $(".block2").slideToggle(2000,function(){
            alert(2)
        })
    });
</script>

3.淡入淡出效果

fadeIn()方法功能为淡入，fadeOut()方法功能为淡出，fadeToggle()方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

<script>
 $("#btn5").click(function(){
        $(".block3").fadeOut(500);// 淡出
        $(".block3").fadeIn(500);// 淡入
        $(".block3").fadeToggle(500);//淡入淡出
    });
</script>

4.透明度变化

要将透明度指定到某一个值，需要调用fadeTo()方法，语法格式为fadeTo(speed,opacity,[callback])

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

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

<script>
$("#btn6").click(function(){
        $(".block4").fadeTo(1000,0.5,"linear",function(){
            alert(1);
        })
    });
</script>

5.自定义动画

jQuery中允许用户自定义动画效果，通过使用animate()方法，语法格式为

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

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

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

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

注意，生成动画的过程中可同时使用多个属性

示例：

<script>
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 
</script>

“队列”动画，指在元素中执行一个以上的多个动画效果，即有多个animate()方法在元素中执行，因此，根据这些animate()方法执行的先后顺序，形成了动画“队列”，产生“队列”后，动画按照“队列”顺序进行展示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <style>
        div{
            background-color: #ec9bff;
        }
    </style>
</head>
<body>
<button>按钮</button>
<div ></div>
<script>
    $("button").click(function(){
        var div=$("div");
        div.animate({height:'300px',opacity:'0.4'},"slow");
        div.animate({width:'300px',opacity:'0.8'},"slow");
        div.animate({height:'100px',opacity:'0.4'},"slow");
        div.animate({width:'100px',opacity:'0.8'},"slow");
    });
</script>
</body>
</html>

6.动画的停止和延迟

stop() 方法用于停止动画或效果，在它们完成之前。适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法：$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认仅停止正在进行的动画不影响后面的动画执行

<script>
  $("#stop").click(function () {
        $(".block5").stop();
    });
</script>

delay()方法用于设置一个延时值来推迟后续队列中动画的执行，语法格式为delay(duration,[queueName])，

其中参数duration为延时的时间值，单位为毫秒。可选参数[queueName]表示队列名词，即动画队列

<script>
 $("#btn7").click(function(){
        $(".block5").delay(1000).animate({
            marginLeft:"800px",
            opacity:0.5,
            width:"200px",
            height:"200px"
        },1000,"linear",function(){
            //完成
        }).delay(1000).animate({
            marginLeft:0,
            opacity: 1,
            width:"100px",
            height:"100px"

        },1000)
    });
</script>

木易一

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery动画

1.动画效果的显示与隐藏show(speed,[callback]) 显示hide(speed,[callback]) 隐藏上面方法中参数speed表示执行动画时的速度，可以自定义，单位为毫秒，可以使用默认字符“slow”、“normal”、“fast”,其对应速度分别为“0.6秒”、“0.4秒”、“0.2秒”；可选参数[callback]为在动画完成时执行的回调函数示...
复制链接

扫一扫