Question

我正在尝试使用动画'bounceslide'，但我没有看到任何反弹！任何想法 - 我都是jQuery的新手。

由于

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

Answer 1

当您在展开的容器上方选择容器时，它会起作用。我认为这是标准行为。

Answer 2

我知道这是一个老问题，你可能已经想到了，但我今天遇到了几乎这个问题，所以我创建了一个工作示例here。我删除了你的一些样式的宽度和其他微小的变化，但改变很少你的原始工作，所以我怀疑你在IE上运行，根本不显示动画。至少现在，如果其他人遇到这个问题，他们可以找到一个有效的例子。

jQuery UI bounceslide动画无法正常工作？

2 个答案: