2016-10-08 6 views
0

だから私は3つのスクリプトスクリプトで別のタブが開かれると、1つのタブが閉じないようにするにはどうすればよいですか?

タブ1を開き、(mouseleave時に閉じスクリプト1)タブ1と2を開き、(mouseleave時に閉じ

$(document).ready(function(){ 
var myTimeOut; 
var rightSlide1 = ".rightslide1"; 

$(rightSlide1).mouseenter(function(){ 
    myTimeOut = setTimeout(function(){ 
     $(rightSlide1).stop(true,true).animate({"left": "9.5vw"}, "300"); 
    }, 1000); 
}); 


$(rightSlide1).mouseleave(function(){ 
    clearTimeout(myTimeOut); 
    $(rightSlide1).animate({"left": "37vw"}, "300"); 
}); 

スクリプト2)

$(document).ready(function(){ 
    var myTimeOut; 
    var rightSlide1 = ".rightslide1"; 
    var rightSlide2 = ".rightslide2"; 

    $(rightSlide2).mouseenter(function(){ 
     myTimeOut = setTimeout(function(){ 
      $(rightSlide1).stop(true,true).animate({"left": "9.5vw"}, "300"); 
      $(rightSlide2).animate({"left": "14vw"}, "300"); 
     }, 1000); 
    }); 


    $(rightSlide2).mouseleave(function(){ 
     clearTimeout(myTimeOut); 
     $(rightSlide1).animate({"left": "37vw"}, "300"); 
     $(rightSlide2).animate({"left": "41.5vw"}, "300"); 
    }); 
});    
を持っています

と1,2番目と3番目のタブを開き、mouseleave()を実行したときにすべて閉じるスクリプト3 3

$(document).ready(function(){ 
    var myTimeOut; 
    var rightSlide1 = ".rightslide1"; 
    var rightSlide2 = ".rightslide2"; 
    var rightSlide3 = ".rightslide3"; 

    $(rightSlide3).mouseenter(function(){ 
     myTimeOut = setTimeout(function(){ 
      $(rightSlide1).stop(true,true).animate({"left": "9.5vw"}, "300"); 
      $(rightSlide2).animate({"left": "14vw"}, "270"); 
      $(rightSlide3).animate({"left": "18.5vw"}, "300"); 
     }, 1000; 
    }); 


    $(rightSlide3).mouseleave(function(){ 
     clearTimeout(myTimeOut); 
     $(rightSlide1).animate({"left": "37vw"}, "300"); 
     $(rightSlide2).animate({"left": "41.5vw"}, "270"); 
     $(rightSlide3).animate({"left": "46vw"}, "300"); 
    }); 
});     

基本的にこのページには3つのタブがあります。 1 | 2 | 3 |私はタブを開き、それらをお互いにスライドさせることができるようにしたい。私が望むように左にスライドするタブを得たが、問題は今誰かがタブ2を開いている間、タブ1を開いたままにする方法を理解できない。タブ2を開くときに閉じる。あなたが去るとき、すぐにあなたのタブに近いが、開口部は、1秒遅れで表示されます。

問題#1:

答えて

0

はあなたの問題を引き起こしている2つの小さな問題があります。そのようにしたい場合、タブは常に最初に閉じて開きます。遅延時間を短縮すると、同時に閉じて開くことができます。しかし、彼らはあまりにもずっと滑り続けています。私はその遅延を取り除くか、近いアニメーションに追加することをお勧めします。あなたはまた、アコーデオンに入るときに1つの一般的な遅れを作ることができます。

問題#2:これはより重要なものです。あなたはjQueryのstop()メソッドを使用しています。まず、すべてのアニメーションで一貫して使用する必要があるため、すぐに実行され、キューに入れられず、非常に奇妙な動作が発生する可能性があります。第2に、第2パラメータをに設定しないでください。。これにより、現在のアニメーションがすぐに終了し、タブが「ジャンプ」します。代わりにfalseに設定すると、タブは現在の位置で停止し、この時点からの新しいアニメーションが続行されます。これにより、ユーザーエクスペリエンスがはるかに向上します。

遅延を取り除き、2番目のパラメータを変更すると、閉じることが美しく互いにスライドします。よろしく、
Syntac

+0



私はショット明日の夜にこれを提供します。 –

+0

ありがとうありがとうございました –

+0

@Weber問題ありません:)。私はそれが助けてうれしい! – Syntac

関連する問題