Faites glisser DIV de Droite à Gauche avec jQuery

J'utilise jQuery pour animer un div de gauche à droite sur la charge, puis en cliquant sur le bouton de fermeture de la div cache de droite à gauche. Ça fonctionne, c'est tout simplement pas aller de gauche à droite à l'horizontale, mais en diagonale. Ce que je fais mal? Voici un exemple de code que j'utilise http://jsfiddle.net/N8NpE/2/

$(function(){
    $("#content-box").hide(0).delay(0).show(500);
});

$(function(){
    $("#ClosePanel").click(function () {
        $("#content-box").hide("slow");
    });
});

Toute aide sera grandement appréciée.

OriginalL'auteur Mr. Bacan | 2013-10-06

  1. 4

    Vous pouvez essayer d'utiliser .animate() au lieu de .hide() et .show(). Cela vous donnera un peu plus de contrôle sur tout.

    $("#content-box").animate({'width': 240},500);

    Et à fermer, inclure une fonction de rappel pour définir d'affichage à aucun après l'animation:

    $("#content-box").animate({'width': 0},500,function(){
       $("#content-box").css('display','none');
});

    http://jsfiddle.net/N8NpE/6/

    Tous affiché des techniques travaillé, mais j'ai bien aimé ce un de mieux, car il donne plus de contrôle que vous avez dit. La seule chose est qu'il n'est pas de glisse, il suffit de se présenter et lors de la fermeture le faire glisser vers la droite, mais c'est en serrant le texte au lieu de réellement le faisant glisser. Voici le lien où j'ai utilisé le script.
    Vous devez d'abord spécifier une largeur de 0 sur cet élément dans votre css, comme un point de départ pour votre animation. Comme pour le texte "serrant", pour éviter cela, vous devez avoir un wrapper autour du texte de largeur fixe, puis définissez overflow: hidden; sur le contenu de la boîte (l'élément qui est de l'animation, pas de l'enfant avec la largeur fixe). De cette façon, le contenu de la boîte va se rétrécir en largeur, mais le contenu restera une largeur fixe.
    Merci beaucoup Blake, il a travaillé beaucoup. Il y a un petit problème cependant. J'ai besoin d'ajouter un 5s retard avant de la boîte glisse vers la droite, j'ai donc ajouté un .delay(5000) pour le code '$("#contenu").delay(5000).animate({'width': 300},1000); " et maintenant il tout d'abord afficher le texte et après 5s disparaître et démarrer l'animation comme il se doit. [Voici l'exemple ](azurpanama.com/index.php?page=fullbg-test)
    Le overflow: hidden; css doit être sur le div avec l'id de la boîte de contenu (#content-box). C'est ce qui maintient le texte hors de la vue jusqu'à ce que la largeur de la boîte devient assez grande pour que le texte soit visible.
    Merci beaucoup, cela a fonctionné parfaitement.

    OriginalL'auteur Blake Mann

  2. 2

    Vous devez inclure jQuery UI dans votre script et changer votre fonction un peu:

    $(function(){
$("#content-box").hide(0).delay(0).toggle('slide', {
        direction: 'left'
    }, 1000);
});

    Ici est une mise à jour de jsfiddle: http://jsfiddle.net/N8NpE/4/

    Merci Maxime, ce code a fonctionné et est très utile, mais je suis en train de charger moins de scripts dans la page. Mais je vais assurer l'utiliser dans d'autres projets.

    OriginalL'auteur Maxim Ershov

  3. 0

    $('#content-box').animate({width: 'toggle'});

    http://jsfiddle.net/U7wGt/

    Comme toutes les autres, celle-ci a également travaillé, mais je vais essayer de diminuer le chargement des codes. Merci pour votre aide Joseph.

    OriginalL'auteur Joseph