JQuery - Comment faderOut au lieu de glisser vers le haut?

Question

J'ai 2 sections appelées .about-us et .price-list. Avec 2 boutons qui les active .prices et .about-us-btn. Les deux sections sont cachées par défaut avec JQuery et ont un événement .slideToggle pour chacun, si un est visible, il va glisser si je clique sur l'autre bouton pour cela.

Maintenant, j'ai pensé, au lieu de glisser en arrière, ils peuvent faire un événement fadeOut. Cela fonctionne, mais seulement si la liste de prix est visible en premier, puis cliquez sur .prices. (les deux sections sont dans la même position, mais une seule est visible lorsque je clique sur un bouton). Si .about-us est visible en premier, alors si je clique sur le bouton .prices, le .about-us va glisser vers le haut au lieu de s'effacer.

Sera de toute façon. J'espère que vous comprenez et pouvez m'aider! Voici mon code JQuery:

$(document).ready(function(e){ 
    // Price-list & About-us are hidden by Javascript 
    $("aside.price-list, aside.about-us").hide(); 
    // Create a slide for the price-list 
    $("button.prices").click(function(){ 
     $("aside.about-us").fadeOut(300); 
     $("aside.price-list").slideToggle(300); 
    }); 
    // Create a slide for the about-us 
    $("button.about-btn").click(function(e){ 
     $("aside.about-us").slideToggle(300); 
     $("aside.price-list").fadeOut(300); 
    }); 

}); 

Answer 1

Au lieu de .slideToggle() vous devez utiliser .slideUp() et .slideDown() explicitement ici (puisque vous ne savez pas dans quel état ils sont dans un premier temps, comme ceci:

$(function() { 
    $("aside.price-list, aside.about-us").hide(); 
    $("button.prices").click(function() { 
    $("aside.about-us").fadeOut(300); 
    $("aside.price-list").slideDown(300); 
    }); 
    $("button.about-btn").click(function() { 
    $("aside.about-us").slideDown(300); 
    $("aside.price-list").fadeOut(300); 
    }); 
}); 

Ou, si vous vouliez Pour effacer complètement chacun avant que la diapositive ne se produise sur l'autre, utilisez le rappel .fadeOut(), comme ceci:

$(function() { 
    $("aside.price-list, aside.about-us").hide(); 
    $("button.prices").click(function() { 
    $("aside.about-us").fadeOut(300, function() { 
     $("aside.price-list").slideDown(300); 
    }); 
    }); 
    $("button.about-btn").click(function() { 
    $("aside.price-list").fadeOut(300, function() { 
     $("aside.about-us").slideDown(300); 
    }); 
    }); 
}); 

Answer 2

On dirait que vous essayez de créer un effet jQuery Accordian. Le lien suivant devrait vous aider.

http://docs.jquery.com/UI/Accordion