0

タイトルが示すように、何らかの理由で、ボックスがスライドして戻る前に遅延が発生しません。現在、「.boxset」クラスの「#box」という div にカーソルを合わせると、「#slidebox」という div が表示されます。#slidebox にも「.bo​​xset」のクラスがあります。これらの 2 つの div からマウスを離すと、#slidebox は上にスライドします。この点で、それは美しく機能しています。

スライドする前に遅延が欲しいのですが、何らかの理由で delay() が機能していません。

コードの重要な行は、hover() の下の 2 つの関数の 2 番目にあります。

いいえ:

$('#slidebox').stop().delay(600).slideUp({

誰でも何か間違ったことを見ることができますか？

助けてくれてありがとう！

jQuery

$('#slidebox').hide();
$('.boxset').hover(
            function() {  
    $('#slidebox').stop().slideDown(
        {
        duration:600, 
        easing: "swing",
        queue: false,
        complete: function() {
        $('#slidebox').removeAttr('style');}  //End complete   
        } //End object literals
        ); // End slideDown
                    } // End first function
    ,
    function() {
        $('#slidebox').stop().delay(600).slideUp({   
        duration:600, 
        easing: "swing",
        queue: false,
        } // End object literals
                    ); //End slideUp
                    } // End second function   

); // End Hover

HTML

<div id="box" class="boxset"></div>
<div id="slidebox" class="boxset"></div>

CSS

#box {
    width: 100%;
    height: 35px;
    background-color: orange;
    drop-shadow: 2px 2px 1px rgba(0,0,0,.25);
    border-radius: 10px 0px 10px 0px;
    color: white;
    diplay:block;
    text-align: right;

}

#slidebox { 
    width:100%;
    height: 100px;
    background-color: rgba(23,34,1, .1);
    border-radius: 10px 10px 0px 10px;
    display: block;}
4

2 に答える 2

2

JQueryのドキュメントから：

queue: アニメーションをエフェクト キューに配置するかどうかを示すブール値。false の場合、アニメーションはすぐに開始されます。jQuery 1.7 以降、queue オプションは文字列も受け入れることができます。この場合、アニメーションはその文字列によって表されるキューに追加されます。

ホバー時に handlerOut 関数に queue:true を設定してみてください

Div 要素のネストを変更し、内側の div から「boxset」クラスを削除して、イベント ハンドラーが複数回起動しないようにします。これにより、一貫性のない動作が修正されるはずです。

<div id="box" class="boxset">
<div id="slidebox"></div>
​&lt;/div>​
于 2012-08-14T22:52:42.727 に答える
0

この場合、setTimeout を使用したいと思います。

var timeOut;
$('.boxset').hover(
    function() {
        clearTimeout(timeOut);
        $('#slidebox').stop().slideDown({
            duration:600, 
            easing: "swing",
            queue: false,
            complete: function() {
                $('#slidebox').removeAttr('style');}  //End complete   
        });
    },
    function() {
        $('#slidebox').stop();
        timeOut=setTimeout(function(){
            $('#slidebox').slideUp({  
                duration:600, 
                easing: "swing",
                queue: false,
            });
        }, 600);
    }

http://jsfiddle.net/HDLCE/1/

于 2012-08-14T22:52:17.273 に答える