jQuery UI bounceslide animation not working?_问答_开发者

jQuery UI bounceslide animation not working?

开发者 https://www.devze.com 2022-12-20 21:07 出处：网络

i\'m trying to use the animation \'bounceslide\' but I\'m not seeing any bounce! Any ideas - I\'m pretty new to jQuery.

i'm trying to use the animation 'bounceslide' but I'm not seeing any bounce! Any ideas - I'm pretty new to jQuery.

Thanks

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

It works when you select a container above the container that is expanded. I assume this is the standard behaviour.

I know this is an old question that you've probably long since figured out, but I was running into nearly this exact problem today, so I created a working example here. I removed some of your styling for width and other minor changes, but changed very little to your original work so I suspect you were running on IE which does not show animations at all. At least now if someone else comes across this question they can find a working example.