Wie würde ich verhindern, dass ein Tab geschlossen wird, während das andere in meinem Skript geöffnet wird?

Question

So habe ich 3 Skripte

Script 1, die eine Lasche und schließt bei mouseleave öffnet()

$(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"); 
}); 

Script 2 die Registerkarte ein und 2 und schließt bei mouseleave öffnet()

$(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"); 
    }); 
});    

Und Skript 3, das die Registerkarten eins, zwei und drei öffnet und alle auf mouseleave schließt()

$(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"); 
    }); 
});     

Also im Grunde auf dieser Seite habe ich 3 Registerkarten. 1 | 2 | 3 | und ich möchte in der Lage sein, die Tabs zu öffnen und sie gegeneinander gleiten zu lassen. Ich habe die Tabs nach links rutschen lassen, wie ich will, aber das Problem ist jetzt, ich kann nicht herausfinden, wie man Tab 1 offen hält, während jemand Tab 2 öffnet. Es schließt, wenn ich Tab 2 öffne, was einfach nur schäbig aussieht.

Answer 1

gibt es zwei kleine Fragen, die Ihr Problem verursachen:

Ausgabe # 1: Ihre Tabs schließen sofort, wenn Sie verlassen, aber die Öffnung um 1 Sekunde verzögert. Wenn Sie es so behalten möchten, werden Ihre Tabs immer zuerst geschlossen und verzögert geöffnet. Wenn Sie die Verzögerungszeit verringern, können sie gleichzeitig geschlossen und geöffnet werden. Allerdings werden sie ein bisschen zu viel herumrutschen. Ich würde empfehlen, diese Verzögerung loszuwerden oder sie auch der Close-Animation hinzuzufügen. Sie könnten auch eine allgemeine Verzögerung machen, wenn Sie das Akkordeon betreten.

Ausgabe # 2: Dies ist die wichtigere. Sie verwenden jQuerys stop() -Methode. Erstens sollten Sie es konsequent in allen Ihren Animationen verwenden, so dass sie sofort ausgeführt und nicht in die Warteschlange gestellt werden, was zu sehr merkwürdigem Verhalten führen kann. Zweitens, setzen Sie den zweiten Parameter nicht auf true. Dadurch wird die aktuelle Animation sofort auf ihr Ende gesetzt, wodurch die Registerkarten "springen". Wenn Sie stattdessen false setzen, wird die Registerkarte an der aktuellen Position angehalten und von diesem Punkt an mit der neuen Animation fortgesetzt. Dies wird zu einer wesentlich besseren Benutzererfahrung führen.

Wenn Sie die Verzögerung loswerden und den zweiten Parameter ändern, gleitet Ihr Schließen wunderschön aneinander.

Mit freundlichen Grüßen
Syntac