jQuery Horizontal Problème d'animation et d'accordéon

J'ai besoin de faire un accordéon horizontal de nos jours.jQuery Horizontal Problème d'animation et d'accordéon

Vous pouvez voir qu'il y a un petit "saut" des boîtes de couleur sur le côté droit lorsque vous cliquez sur la case de couleur. Je ne sais pas pourquoi le petit "saut" se produit. J'utilise ensuite animate au lieu de cacher et d'afficher pour essayer de résoudre le problème.

Même si la largeur est animée à 0px, l'élément a encore quelques pixels, donc j'essaie de le cacher après l'animation. Mais la fonction hide() ne fait rien. Pourquoi?

Lors du débogage, je trouve que l'alerte ("bon") s'exécute juste avant la fin de l'animation. Pourquoi?

Merci d'avoir répondu à mes questions.

Voici le code:

<html> 
<head> 
<style type="text/css"> 
.accordion { padding: 3px; margin: 0px; float: left; width: 300px;} 
.accordionTitle { cursor: pointer; padding: 3px; margin: 0px; float: left;width:20px; height:150px; } 
.clearBoth { clear: both; } 
</style> 
<script src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" > 
$(function() { 
    var elementToTransform = ".accordion" 
    $(elementToTransform).hide(); 
    var currentAccordionPanel = ($(".currentAccordionPanel").show())[0]; 
    $(".accordionTitle").click(function() { 
     if ($(this).next(elementToTransform)[0] != currentAccordionPanel) 
      { 
       $(currentAccordionPanel).hide(400); 
       $(this).next(elementToTransform).show(400); 
       /*$(currentAccordionPanel).animate({width:"0px"},{duration:200,queue:false},{},function(){alert("good")}); 
       $(this).next(elementToTransform).animate({width:"300px"},{duration:200,queue:false}); 
         $(currentAccordionPanel).hide(); // the element still has few pixels even width animates to 0, so I hide it 
*/ 
       currentAccordionPanel = $(this).next(elementToTransform)[0]; 
      } 

    }) 
}); 
</script> 
</head> 
<body> 
<div style="width:800px;"> 
    <div id="cat1"> 
     <div class="accordionTitle" style="background:blue">1</div> 
     <div class="accordion currentAccordionPanel" id="p1">content 1</div> 
    </div> 
    <div id="cat2"> 
     <div class="accordionTitle" style="background:red">2</div> 
     <div class="accordion" id="p2">content 2</div> 
    </div> 
    <div id="cat3"> 
     <div class="accordionTitle" style="background:yellow">3</div> 
     <div class="accordion" id="p3">content 3</div> 
    </div> 
    <div id="cat4"> 
     <div class="accordionTitle" style="background:green">4</div> 
     <div class="accordion" id="p4">content 4</div> 
    </div> 
    <div id="cat5"> 
     <div class="accordionTitle" style="background:red">5</div> 
     <div class="accordion" id="p5">content 5</div> 
    </div> 
    <div class="clearBoth"></div> 
</div> 
</body> 
</html>

Source

2009-06-07 Billy

Je vous suggère d'ajouter le style suivant aux classes accordéon et accordionTitle:

overflow:hidden;

Ce serait au moins résoudre le problème de la largeur non aller à zéro.

Source

2009-06-07 09:34:54

jQuery Horizontal Problème d'animation et d'accordéon

Répondre

Questions connexes