2010-02-19 3 views
0

애니메이션 'bounceslide'를 사용하려고하는데 바운스가 보이지 않습니다! 모든 아이디어 - 저는 jQuery를 처음 접했습니다.jQuery UI bounceslide 애니메이션이 작동하지 않습니까?

감사

<!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에서 실행 중이라고 생각됩니다. 적어도 다른 누군가가이 질문을 우연히 만난다면 그들은 실천 사례를 발견 할 수 있습니다.

관련 문제