Animation de diapositives Jquery

Bonne journée! J'essaye de cacher et montrer des divs avec l'animation de diapositive. Mon code est le suivant:Animation de diapositives Jquery

<style> 
    div.bigBox 
      { 
      background-color:white; 
      width:100px; 
      height:125px; 
      overflow:hidden; 
      } 
      div.try{ 
      background-color:green; 
      width:100px; 
      height:125px; 
      float: left; 
      } 
      div.try2{ 
      background-color:yellow; 
      width:100px; 
      height:125px; 
      } 
    } 
    </style> 
    <script language="JavaScript" src="js/jquery-1.6.1.js"></script> 
    <script src="http://ui.jquery.com/latest/ui/jquery.effects.core.js"></script> 
    <script src="http://ui.jquery.com/latest/ui/jquery.effects.slide.js"></script> 
</head> 
<body> 
    <div class="bigBox"> 
      <div class="try"> 
       <p id="haha">CLICK THIS</p> 
       <p>This is a demonstration of jQuery SimpleDialog.</p> 
      </div> 
      <div class="try2"> 
       <h3 id="test2">CLICK THIS</h3> 
       <p>This is a demonstration of jQuery SimpleDialog.</p> 
      </div> 
    </div> 
<script> 
    $('#haha').click(function() { 
     alert("test"); 
     $('.try').hide("slide", { direction: "left" }, 1000); 
     $('.try2').show("slide", { direction: "right" }, 1000); 
    }); 
</script>

Le problème est la transition d'une case à l'autre. Cela ne coule pas très bien. Je veux me cacher et en même temps montrer (comme suivre la boîte à cacher). S'il vous plaît aider. Merci

Source

2011-11-14 newbie

Sans rapport avec le problème: vous avez une accolade de fermeture supplémentaire juste avant de fermer le style marque. Connexe: Voici un violon (jQ 1.7 pour rendre l'accès à jQ UI plus facile) pour toute personne qui prend un coup de poing: http://jsfiddle.net/GregP/CV7fd/ –

Il y a probablement une douzaine de façons de la peau ce chat, mais voici ce que je faisais:

Gave position bigBOX: relative
Changé les boîtes essayez d'utiliser la position: absolute de sorte qu'ils empilent sur sommet de l'un l'autre
Changé l'ordre du HTML pour s'assurer que try (pas try2) reste au top; vous pouvez le faire d'autres façons comme avec z-index
Débordement supprimé: caché sur bigBox et rendu transparent en arrière-plan, bien que cela ne fasse pas honnêtement de différence
J'ai modifié le CSS pour l'adapter à mon style personnel; désolé, c'est une demi-TOC chose

Fiddle: http://jsfiddle.net/GregP/CV7fd/1/

je ne teste pas méthodiquement ma théorie, mais je pense qu'il était le flottant qui était à l'origine de votre problème.

Aucun point montrant la « commutation de l'ordre du .Essayez et .try2 cases » balisage ou JavaScript (qui est intacte), mais voici le CSS mise à jour:

div.bigBox { 
    background-color:transparent; 
    width:100px; 
    height:125px; 
    position: relative; 
} 

.try, .try2{ 
    width:100px; 
    height:125px; 
    position: absolute; 
} 

.try { 
    background-color:green; 
} 

.try2{ 
    background-color:yellow; 
}

(tournage, aurait pu utilisé la largeur: et la hauteur: sur bigBox aussi, ah, eh bien, vous obtenez le point, pas besoin que je sois pédant!)

Source

2011-11-14 03:39:16

(aussi FWIW, je pensais que l'évanouissement semblait soigné, aussi: http://jsfiddle.net/GregP/CV7fd/2/) –

avez-vous un code slider où je peux utiliser le débordement de css: hidden ;? Parce que la fonction de mon code ci-dessus est limitée à 2 boîtes mobiles. Tnx – newbie

Le débordement: caché n'était pas un changement nécessaire que j'ai fait. Je viens de tester et c'est bien avec ou sans. Était facile à tester ... juste visiter le violon! –

Avez-vous envisagé d'avoir les deux éléments dans une seule div (qui serait partiellement visible) et de simplement le faire glisser en changeant les marges, en remplissant ou en l'implémentant?

Source

2011-11-14 02:56:42 Shomz

mon code est dans un seul div .. "bigBox" et Je le cache partiellement .. – newbie

ok Je pense que vous en aurez besoin d'un autre (wrapper et conteneur), mais essayez d'ajouter ces règles CSS et voyez ce qui se passe: margin-left: -100px; largeur: 200px; Mon idée était d'animer ces deux valeurs si cela fonctionnait avec les autres éléments de la page. – Shomz

Animation de diapositives Jquery

Répondre

Questions connexes