DIV CSS 佈局教程網

8.10 判斷動畫狀態
編輯:jQuery基礎知識     

之前在“jQuery動畫的停止”這一節中,我們接觸過jQuery動畫中最常見的一個小bug。也詳細給大家探討了這個bug出現的根本原因以及解決方法。

除了stop()方法,在jQuery中我們還可以使用is()方法來判斷所選元素是否正處於動畫狀態,如果元素不處於動畫狀態,則添加新的動畫;如果元素處於動畫狀態,則不添加新的動畫。

語法:

 
if(!$().is(":animated"))
{
    //如果當前沒有進行動畫,則添加新動畫
}

說明:

這個判斷方法在jQuery動畫中經常被用到,大家要認真留意一下。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #wrapper
        {
            position:relative;   /*設置相對定位屬性,以便定位子元素*/
            width:240px;
            height:200px;
            overflow:hidden;
        }
        img
        {
            width:240px;
            height:200px;
        }
        #content
        {
            position:absolute;
            left:0;
            bottom:-28px;
            width:100%;
            height:28px;
            line-height:28px;
            font-family:微軟雅黑;
            text-align:center;
            background-color:rgba(0,0,0,0.7);
            color:White;
        }
    </style>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#wrapper").hover(function () {
                if(!$(" #content", this).is(":animated"))
                {
                    $(" #content", this).animate({ "bottom": "0px" }, 200);
                }
            }, function () {
                if(!$(" #content", this).is(":animated"))
                {
                    $(" #content", this).animate({ "bottom": "-28px" }, 200);
                }
            })
        })
    </script>
</head>
<body>
    <div id="wrapper">
        <img src="../App_images/lesson/run_jq/nvdi.png" alt=""/>
        <div id="content">海賊王女帝</div>
    </div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

在實際開發中,is(":animated")比stop()方法更加容易理解,也更加常用。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved