JQuery каскадный лимит времени?

Question

следующий код:

        <script type="text/javascript" >
            $("#accordion > li > div").hover(function () {
                if (false == $(this).next().is(':visible')) {
                    $('#accordion ul').slideUp(300);
                }
                $(this).next().slideToggle(300);
            });
        </script>

Когда пользователь наводит курсор на элемент li> div, он будет каскадно падать, но к тому времени, когда я увижу опции, он снова будет каскадно подниматься.

изменить: скорость слайда, кажется, работает хорошо в 300 миллисекунд, но я хочу, чтобы она отображалась в течение 3 секунд, а затем свернуть?

Как мне удерживать каскад в течение нескольких секунд? чтобы пользователь мог щелкнуть по элементу li?

РЕДАКТИРОВАТЬ: ДОБАВЛЕНО МОЙ JSFIDDLE - http://jsfiddle.net/dttdB/

Answer 1

Новый ответ

хорошо, звучит так, будто вы новичок в javascript.Поздравляю с поиском jQuery, он определенно станет вашим близким другом!Теперь я покажу вам jQuery-ui аккордеон

css

<!-- language: lang-css -->
    #accordion h3 {
        background-color:grey;
        background-repeat: no-repeat;
        /*border-radius: 10px 10px 10px 10px;*/
        cursor: pointer;
        display: block;
        font-weight: bold;
        height: 48px;
        list-style: circle outside none;
        margin: 1px;
        width: 230px;
    }

html

<!-- language: lang-html -->
    <div id="leftWrap">
        <div id="accordion">
            <h3>Absorption</h3>
            <div>
                <ul>
                    <li><a href="c-77-accessories.aspx">Accessories</a><ul>
                        <li><a href="c-81-aa500afg.aspx">AA500AFG</a></li>
                        <li><a href="c-79-aa500f.aspx">AA500F</a></li>
                        <li><a href="c-80-aa500g.aspx">AA500G</a></li>
                        <li><a href="c-78-aa990f.aspx">AA990F</a></li>
                        </ul>
                    </li>
                    <li><a href="c-82-consumables.aspx">Consumables</a></li>
                    <li><a href="c-76-products.aspx">Products</a></li>
                </ul>
            </div>
            <h3>Fluorescence</h3>
            <div>
                <ul>
                    <li><a href="c-101-accessories.aspx">Accessories</a></li>
                    <li><a href="c-102-consumables.aspx">Consumables</a></li>
                    <li><a href="c-100-products.aspx">Products</a></li>
                </ul>
            </div>
        </div>
    </div>

javascript

 <!-- language: lang-js -->
    $("#accordion").accordion({ header: 'h3',
                                event: 'mouseover',
                                active:false });

---

Старый ответ

с помощью некоторого html я могу дать лучший ответ, но в целом я думаю, что вам нужно связать обе опции функции () в .hover ()

    <script type="text/javascript" >
            $("#accordion > li > div").hover(function (event) {
//the user has moved their mouse on top of the selected Div "#accordion > li > div"
//this will 'slide' whatever is next to the div
              $(this).next().slideToggle(300);
             }, function(event){
//the user has moved their mouse away from the selected Div "#accordion > li > div"
//warning, they may be trying to click on a link in the $(this).next(), don't close on them!
//I will need some html to help more than this
             });
        </script>

js-fiddle

Я думаю, что сделал это вправо

Answer 2

Вы можете попробовать

return false;

после анимации или остановки распространения события. Документация JQuery

Кажется, я не раз сталкивался с этой проблемой, связанной с анимацией событий.