jQuery动画效果学习

wangking717

浏览: 262447 次
性别:
来自: 成都

最近访客更多访客>>

林祥纤

u011616901

声动天下

254198295

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB乱弹

jquery

1、元素的显示和隐藏

display:none; 隐藏

display:block; 显示

简单显示和隐藏方法

a) show() 显示

b) hide() 隐藏

c) toggle() 开关，显示则隐藏，隐藏则显示

<script type="text/javascript">
    function f1(){
        //隐藏
        $("div").hide();//display:none
        //document.getElementById('id').style.display="none";
    }
    function f2(){
        //显示
        $("div").show();//display:block
    }
    function f3(){
        $("div").toggle();
    }
</script>
<style type="text/css">
     div {width:300px; height:200px; background-color:blue;}
</style>
 <body>
     <div>duck and dog</div>
      <input type="button" value="隐藏" onclick="f1()" />
      <input type="button" value="显示" onclick="f2()" />
      <input type="button" value="开关效果" onclick="f3()" />
</body>

CSS支持两种方法显示和隐藏元素，即使用visibility或display样式，他们控制元素显示和隐藏的时候效果相同，但是结果却不同。

具体说明如下：

visibility 属性在隐藏元素的时候，同时会保存元素在文档流中的影响力，隐藏后元素的未知保持不变。该属性包括visible(默认)和hidden两个值。

display 隐藏后，隐藏的元素不再占用文档的位置。

2、滑动效果显示和隐藏

slideUp(speed[,callback]) 向上滑动元素并最终隐藏

slideDown(speed[,callback]) 向下滑动元素并最终显示

slideToggle(speed[,callback])

speed：设置效果的速度(slow（600）normal（400） fast（200）时间(毫秒))

callback: 效果执行完毕之后自动调用的回调函数

<script type="text/javascript">
    function f1(){
        //隐藏
        $("div").slideUp(3000,function(){
            alert('我消失了，你能看到么');
        });
    }
    function f2(){
        //显示
        $("div").slideDown(3000,function(){
            alert('我又回来了');
        });//display:block
    }
    function f3(){
        $("div").slideToggle(1000);
    }
    $(function(){
        //气缸滑动效果
        //setInterval("f3()",1000);
    });
</script>
 
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
 
<body>
     <div>duck and dog</div>
     <input type="button" value="隐藏" onclick="f1()" />
     <input type="button" value="显示" onclick="f2()" />
     <input type="button" value="开关效果" onclick="f3()" />
 </body>

3、淡入淡出效果

让元素通过一定透明度变化，达到显示和隐藏的效果

fadeIn(speed, [callback])

fadeOut(speed, [callback])

fadeToggle(speed, [callback])开关效果

fadeTo(speed, opacity, [callback]) 把div设置一定透明度（0-1）0.3就是30%透明度

<script type="text/javascript"> 
    function f1(){
        //隐藏
        $("div").fadeOut(4000);
    }
    function f2(){
        //显示
        $("div").fadeIn(4000);
        $("#two").fadeTo(2000,0.3);
    }
 
    function f3(){
        $("div").fadeToggle(2000);
    }
 
</script>
<style type="text/css">
    div {width:300px; height:200px; background-color:blue;}
</style>
<body>
    <div id = "two">duck and dog</div>
 
    <input type="button" value="隐藏" onclick="f1()" />
    <input type="button" value="显示" onclick="f2()" />
    <input type="button" value="开关效果" onclick="f3()" />
</body>

设置透明度，div的透明度是30%：

4、动画效果底层方法animate()

show() hide() 等等动画效果内部都是执行animate()方法

$().animate(css效果参数[，时间][，回调函数]);

css()等一般jquery方法执行完毕之后会返回当前jquery对象，因此jquery的许多方法可以链式调用。

<script type="text/javascript">
    function f1(){
        //文字大小、文字粗体、div本身宽度和高度
        //font-size  background-color  color
 
        console.log($("div"));
        //jquery对象调用完毕css方法本身还是一个jquery对象
        //说明css方法执行完毕有return this关键字
        console.log($("div").css('font-weight','bold').css("background-color",'pink')); 
 
        var jn = {'font-size':'30px',width:'400px',height:'300px'};
        $("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);
 
        //$("div").animate(jn,2000);
    }
 
</script>
 
<style type="text/css">
    div {width:300px; height:200px; background-color:blue; }
</style>
 
<body>
    <div>duck and dog</div>
    <input type="button" value="设置" onclick="f1()" />
</body>

5、累加累减动画

如果动画一次设定left：500 ,第一次单击div会左移500像素,第二次单击就不会动了。累加累减就是连续动的，只需要将left:”500px”改成left:”+=500px”或者left:”-=500px”即可。

(function(){  
    $("#panel").click(function(){  
       $(this).animate({left: "+=500px"}, 3000);  
    })  
})

6、多重动画

1、同时执行多个动画上面的例子只控制了left属性的变化，这回我们在控制left属性的时候同时控制元素高度变为200px

$(function(){  
    $("#panel").click(function(){  
       $(this).animate({left: "500px",height:"200px"}, 3000);  
    })  
})

2、顺序执行动画

上面例子中元素右移和放大高度两个动画是同时进行的。现在我们要实现先右移再放大高度，那很简单，只需要把上面的animate()方法拆开写成两个即可

$(function(){  
    $("#panel").click(function(){  
       $(this).animate({left: "500px"},3000)  
              .animate({height:"200px"},1000);  
    })  
})

3、综合动画

接下来完成更复杂的动画。单击div元素后让他向右移动的同时增大他的高度，并将它的不透明度从50%切换到100%。然后再让它从上向下移动，同时它的宽度变大，当完成这

些效果后让它以淡出的方式隐藏掉。

$(function(){  
    $("#panel").css("opacity",0.5);//设置不透明度  
    $("#panel").click(function(){  
       $(this).animate({left: "400px",height:"200px",opacity:"1"},3000)  
              .animate({top:"200px",width:"200px"},3000)  
              .fadeOut(1000);  
    })  
})

7、动画回调函数

在上例中，如果想在最后一步切换css样式而不是隐藏元素。这我们就可以用到animate的第三个参数回调函数了

$(function(){  
    $("#panel").css("opacity",0.5);//设置不透明度  
    $("#panel").click(function(){  
       $(this).animate({left: "400px",height:"200px",opacity:"1"},3000)  
              .animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")});  
 
    })  
})

这样就把css方法加入到动画队列中了。

8、停止动画和判断是否处于动画状态

1、停止元素的动画

stop([clearQueue][,gotoEnd]) 两个都是可选参数，都是boolean类型

参数说明：

clearQueue：代表是否清空未执行完的动画队列

gotoEnd ：代表是否将正在执行的动画跳到末状态

通过一个综合的示例就可以弄明白stop()方法的这两个参数了：

<style type="text/css">  
    *{margin:0;padding:0;}    
    body { font-size: 13px; line-height: 130%; padding: 60px }  
    #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}  
    .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}  
    .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}  
</style>  
<script src="../../../scripts/jquery.js" type="text/javascript"></script>  
<script type="text/javascript">  
    $(function(){  
          $("button:eq(0)").click(function () {  
              $("#panel")  
                .animate({height : "150" } , 2000 )  
                .animate({width : "300" } , 2000 )  
                .hide(3000)  
                .animate({height : "show" , width : "show" , opacity : "show" } , 2000 )  
                .animate({height : "500"} , 2000 );  
          });  
          $("button:eq(1)").click(function () {  
              $("#panel").stop();//停止当前动画，继续下一个动画  
          });  
          $("button:eq(2)").click(function () {  
              $("#panel").stop(true);//清除元素的所有动画  
          });  
          $("button:eq(3)").click(function () {  
              $("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画  
          });  
          $("button:eq(4)").click(function () {  
              $("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态   
          });  
 
    })  
</script>  
 
<body>  
    <button>开始一连串动画</button>  
    <button>stop()</button>  
    <button>stop(true)</button>  
    <button>stop(false,true)</button>  
    <button>stop(true,true)</button>  
    <div id="panel">  
        <h5 class="head">三国杀杀天下</h5>  
        <div class="content">  
            夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情  
        </div>  
    </div>  
</body>  
</html>

2、判断元素是否处于动画状态

当使用animate()方法的时候，要避免动画的累积导致的动画与用户的行为不一致的现象。当用户快速在某个元素上执行animate()动画时，就会出现动画累积。

解决办法是判断元素是否正在处于动画状态，当不处于动画状态的时候，才为元素添加新的动画。

用法：

if(!$(element).is(":animated")){  
    //添加新的动画  
}

分享到：

高可用的Mysql双机热备(Mysql_HA) | Centos6.5下MYSQL主从同步复制，进行读写 ...

2016-05-09 16:36
浏览 663
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论