Animation d'éléments inline avec jQuery

Question

J'essaie d'afficher et de masquer un élément en ligne (par exemple, un span) à l'aide de jQuery.

Si j'utilise simplement toggle (), cela fonctionne comme prévu, mais si j'utilise toggle ("slow") pour lui donner une animation, il transforme la plage en élément de bloc et insère donc des sauts.

Une animation est-elle possible avec des éléments en ligne? Si possible, je préférerais un glissement en douceur plutôt qu'un fondu en entrée.

<script type="text/javascript">
    $(function(){
        $('.toggle').click(function() { $('.hide').toggle("slow") });
    });
</script>
<p>Hello <span class="hide">there</span> jquery</p>
<button class="toggle">Toggle</button>

Answer 1

toggle () comporte un tas de choses étranges, notamment le masquage ou la transformation d'éléments impairs. voici une solution similaire:

$('.toggle').click(function() {
  $('.hide').animate({
    'opacity' : 'toggle',
  });
});

modifier : voici un moyen d'ajouter du glissement en douceur, avec un minimum de balises HTML:

var hidepos = $('.hide').offset().left;
var slidepos = $('.slide').offset().left;

$('.toggle').click(function() {
    var goto = ($('.slide').offset().left < slidepos) ? slidepos : hidepos;

    $('.slide').css({
        'left' : $('.slide').offset().left,
        'position' : 'fixed',
    }).animate({
        'left' : goto,
    }, function() {
        $(this).css('position', 'static');
    });

    $('.hide').animate({
        'opacity' : 'toggle',
    });
});

html:

<p>Hello <span class="hide">there</span> <span class="slide">jquery</span></p>
<button class="toggle">Toggle</button>

Answer 2

Une seule propriété CSS vous rendra heureux: http: //terion-fallen.livejournal .com / 332945.html

#animated-element { display: inline-block!important }

Answer 3

Je ne pense pas que ce soit possible comme ça. La seule façon pour moi de le faire serait d’animer son opacité entre 0 et 1, puis, à l’aide d’un rappel sur l’animation, de l’activer ou de la désactiver.

$('.toggle').click(function() {
    $('.hide:visible').animate(
        {opacity : 0},
        function() { $(this).hide(); }
    );
    $('.hide:hidden')
        .show()
        .animate({opacity : 1})
    ;
});

Answer 4

Comme d'autres réponses l'ont montré, l'atténuation est possible. Cependant, je ne pense pas que "glisser en douceur" sera. En termes simples, une propriété spécifique de l'élément doit être animée. Une étendue en ligne, comme vous l’avez mentionnée, n’a pas de hauteur ni de largeur spécifiques, bien qu’elle ait une opacité.

Answer 5

Je ne pense pas que ce que vous voulez faire soit possible avant l'affichage: inline-block est bien pris en charge sur tous les navigateurs. Pour le moment, je pense que je ferais fondre le fond en rouge, puis cacherais l'élément.

Si display: inline-block était bien pris en charge, vous pouvez changer le style en inline-block, puis animer la largeur ou la hauteur, mais malheureusement cela ne fonctionnera pas très bien de nos jours. Peut-être en 2010:)

Answer 6

Le fait qu'animer modifie son animation en un élément de bloc n'est pas un problème si ce que vous essayez de faire glisser à gauche ou à droite est positionné avec float: left et tout ce qui se trouve à côté est également positionné avec float: à gauche

 $('#pnlPopup #btnUpdateButton').assertOne().animate({ width: "toggle" });

Si #btnUpdateButton est stylé comme suit, il glisse assez bien et pousse le contenu vers la droite.

#btnUpdateButton {
    float: left;
    margin-right: 5px;
}