jQuery animate largeur vers la droite

Je veux animer div pour le glisser vers la droite comme dans l'exemple ci-dessous:

http://jsfiddle.net/56hxy/3/

mais au lieu de déplacer la marge, je veux "squish" la largeur, mais il ne fonctionne pas en changeant la largeur % ( width: '60%' ) il squishes à gauche à la place..

  • Veuillez préciser. De préférence avec des images. un lien pour violon deviendrait inutile une fois qu'il est retiré ou modifié
  • La largeur de qui voulez-vous l'écraser?
InformationsquelleAutor bushdiver | 2013-01-12
  1. 23

    Ne sais pas si c'est exactement ce que vous voulez, mais essayez:

    $('#content').animate({
    marginLeft: '40%',
    width:'60%'
});

    Violon

    Ou donner right:0 à #content dans le CSS, vous pouvez animer les width et qu'il réduira de gauche à droite, sans exiger des marges. Même effet que ci-dessus, mais plus propre. Violon

    Aussi, jQuery est doté d'un "bascule de l'événement" pour alterner les clics donc, si vous êtes basculement juste le clic d'événement que vous pouvez utiliser:

    $('#content').toggle(function() { 
    $(this).animate({ width:'60%' }); 
}, function() {
    $(this).animate({ width:'100%' }); 
});

    Violon

    • le sens parfait, merci
    • hmm, qui bascule de l'événement est génial. Si je bascule le même élément ciblé (l'animation elem) avec une autre bascule événement attaché partout ailleurs, la bascule de l'événement associé à '#contenu' reconnaître que le ciblées élément a déjà été activée?
    • Eh, je ne le pense pas. La bascule est très limitée. Je suis assez sûr il enclenche quand a tiré à partir du gestionnaire de même. Vous pouvez, en théorie, .trigger('click') sur l'élément qui a une bascule de l'événement associé et il fallait ensuite. La bascule est la plupart du temps pour des choses simples, si vous avez besoin d'une solution robuste, gardez votre manuel de basculement. =]
    • Je vois, c'est toujours plutôt à portée de main, merci
    • Ceci est un exemple de ce que je voulais dire dans le dernier commentaire: jsfiddle.net/XVZRc - vous le voyez, il devient un peu plus compliqué donc garder un drapeau comme vous l'avez fait au début, c'est probablement plus concise, alors.
    InformationsquelleAutor Fabrício Matté