2010-02-19 81 views
0

我試圖使用動畫'bounceslide',但我沒有看到任何反彈!任何想法 - 我對jQuery相當陌生。jQuery UI跳動滑動動畫不起作用?

感謝

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>Accordion</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="js/ui.core.js"></script> 
<script type="text/javascript" src="js/effects.core.js"></script> 
<script type="text/javascript" src="js/ui.accordion.js"></script> 

<script type="text/javascript"> 
    $(function() { 
     $("#accordion").accordion({ 
      collapsible: true, 
      active:false, 
      animated: 'bounceslide' 
     }); 
    }); 
    </script> 
    <style type="text/css"> 

    body { 
    font-family: Helvetica, Arial, sans-serif; 
    } 

    .demo { 
    width:750px; 
    margin: 0 auto; 
    } 

    h3+div{ 
    background: rgba(0,0,0,.2); 
    padding:4px; 
    } 

    h3 { 
    background:#4495D1 url(alert-overlay.png) 0% 0% repeat-x; 
    cursor: pointer; 
    outline: none; 
    padding: 10px; 
    } 

    h3:hover { 
    background-color: #555; 
    } 

    h3 a { 
    color: white; 
    text-decoration: none; 
    } 

    </style> 

</head> 


<div class="demo"> 

<div id="accordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div> 
     <p> 
     Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
     ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
     amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
     odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
     </p> 
    </div> 
    <h3><a href="#">Section 2</a></h3> 
    <div> 
     <p> 
     Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
     purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor 
     velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In 
     suscipit faucibus urna. 
     </p> 
    </div> 
</div> 

</div><!-- End demo --> 

回答

0

當您選擇了擴展的容器上面的容器它的工作原理。我認爲這是標準行爲。

0

我知道這是一個老問題,你可能早就想通了,但我今天遇到了幾乎這個確切的問題,所以我創建了一個工作示例here。我刪除了一些關於寬度和其他細微變化的樣式,但是對原始作品的變化很小,所以我懷疑你是在IE上運行的,它根本不顯示動畫。至少現在如果有人遇到這個問題,他們可以找到一個工作的例子。