jquery基础（7）动画特效

最新推荐文章于 2024-04-05 13:18:03 发布

原创最新推荐文章于 2024-04-05 13:18:03 发布 · 549 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了jQuery中的动画效果实现方法，包括使用fadeTo()调整元素透明度、animate()制作复杂动画如移动位置及尺寸变化，以及如何运用stop()和delay()控制动画流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

------------------------fadeTo()------------------------------------

调用fadeTo()方法，可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值，该方法的调用格式为：

$(selector).fadeTo(speed,opacity,[callback])

其中speed参数为效果的速度，opacity参数为指定的不透明值，它的取值范围是0.0~1.0，可选项参数callback为效果完成后，回调的函数名。

----------------------------animate()----stop()----delay()----------------------

调用animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。

例如，调用animate()方法先将图片向右移动90px，然后，再将图片宽度与高度分别增加30px，如下图所示：

stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为：

$(selector).stop([clearQueue],[goToEnd])

其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。

delay()方法的功能是设置一个延时值来推迟动画效果的执行，它的调用格式为：

$(selector).delay(duration)

其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执行。

<!DOCTYPE html>
<html>
<style type="text/css">
    div{
        position:absolute;
        top:50px;
        left:200px;
        height:50px;
        width:50px;
        border:1px solid red;
        }
        div
{
    margin: 10px 0px;
}
span
{
    position:absolute;
    width:80px;
    height:80px;
    border: solid 1px #ccc;
    margin: 0px 8px;
    background-color: Red;
    color:White;
    vertical-align:middle
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>stop</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
    <div></div>
    <input id="left" type="button" value="左移"/>
     <input id="right" type="button" value="右移"/>
     <input id="stop" type="button" value="stop">
     <input id="huanchong" type="button" value="等待...">
     <script type="text/javascript">
        $(function(){
            var $ltime=0;
            var $rtime=0;
            var $stop=0;
            var $delay=0;
            $("#left").bind("click",function(){
                $ltime++;
                $("div").animate({
                    left: "-=50px"
                },3000,function(){
                    $("div").html("左移"+$ltime+"次")
                    })
            });
           $("#right").bind("click",function(){
               $("div").animate({
                   left: "+=50"
               },3000,function(){
                   $rtime++;
                   $(this).html("右移"+$rtime+"次")
               })
            })
            $("#stop").bind("click",function(){
                $stop++;
                $("div").stop();
                $("div").html("stop"+$stop+"次")
            });
            $("#huanchong").bind("click",function(){
            $delay++;
            $("div").delay(3000);
            $("div").html("delay"+$delay+"次")
        });
        });    
     </script>
</body>
</html>