2010-02-19 8 views
0

J'essaie d'utiliser l'animation 'bounceslide' mais je ne vois aucun rebond! Toutes les idées - je suis assez nouveau à jQuery.L'animation jQuery UI bounceslide ne fonctionne pas?

Merci

<!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 --> 

Répondre

0

Il fonctionne lorsque vous sélectionnez un conteneur au-dessus du conteneur qui est élargi. Je suppose que c'est le comportement standard.

0

Je sais que c'est une vieille question que vous avez probablement compris depuis longtemps, mais je courais dans presque ce problème exact aujourd'hui, donc j'ai créé un exemple de travail here. J'ai enlevé une partie de votre style pour la largeur et d'autres changements mineurs, mais j'ai très peu changé votre travail d'origine, donc je suppose que vous avez fonctionné sur IE qui n'affiche aucune animation du tout. Au moins maintenant, si quelqu'un d'autre rencontre cette question, ils peuvent trouver un exemple de travail.

Questions connexes