Animation JQuery non glissante / cassée - jquery-animate, glissante

Premièrement, je ne suis pas vraiment familiarisé avec javascript ou jquery, généralement les plugins ou le code très très simple à la main (comme vous allez le voir).

Wat que je veux est fait plusieurs fois, mais pour une raison quelconque je ne peux pas le faire fonctionner comme je le ferais J'ai plusieurs problèmes.

J'utilise le .animation pour faire entrer et sortir 2 divs (2 divs côte à côte, et je veux qu'ils glissent vers l'intérieur et l'extérieur de l'écran (comme l'iPhone homescreen par exemple).

Maintenant le problème est que l'animation ne fonctionne pas commeAu lieu de "glisser vers l'extérieur de l'écran", div1 disparaît / disparaît (glisse vers le haut et la gauche) au lieu de "glisser vers l'extérieur de l'écran" puis div2 apparaît ensuite. (Ainsi, l'effet de glissement ne fonctionne pas et les divs se cachent et s'affichent séparément au lieu de glisser comme un écran d'iphone).

Maintenant, le problème est que j'ai recréé la configuration et essayé dessus, et que cela fonctionne comme prévu, comme indiqué ici: http://jsfiddle.net/dkeulen/2fHbz/

Donc c'est comme ça que je veux que ça marche, mais ça ne se fait pas comme le montre ici: (NOTE: son travail est en cours) http://jsfiddle.net/dkeulen/gQ9aE/2/ (Le carré noir au centre à droite est le bouton sur lequel vous devez cliquer).

Je pourrais poster tous les html et css et jquery ici, mais c'est tout à fait le montant à poster Si quelque chose est nécessaire, je peux le fournir bien sûr.

Comme code c'est la partie que j'utilise pour le glissement:

$(".btnr").click(function(){
$("#hosting").animate({"width" : "0px"}, 100).hide(600);
$("#inexchange").animate({"width" : "100%"}, 600).show(600);
$(".btnl").fadeIn(600);
$(".btnr").fadeOut(600);
});

$(".btnl").click(function(){
$("#hosting").animate({"width" : "100%"}, 600).show(400);
$("#inexchange").animate({"width" : "0px"}, 600).hide(600);
$(".btnl").fadeOut(600);
$(".btnr").fadeIn(600);
});

J'espère que tout le monde peut m'aider à comprendre ce qui ne va pas et ce que je dois faire à ce sujet, merci d'avance !.

Réponses:

il vaut mieux spécifier un jsfiddle pour que nous le voyions en action Je pense que votre problème est que les hide () et show () ne se superposent pas dans la même file d’animation

donc une façon de résoudre cela utilise promise ex.

$(".btnr").click(function(){
promise1 = $("#hosting").animate({"width" : "0px"}, 100).promise();
$.when(promise1).then(
function(){
$("#hosting").hide();
$("#inexchange").animate({"width" : "100%"}, 600).show(600);
$(".btnl").fadeIn(600);
$(".btnr").fadeOut(600);
});
});

il en va de même pour l'autre bouton.

vérifier ce simple violon que j’ai fait pour montrer comment ça marche http://jsfiddle.net/artmees/BCTxH/