Animar elementos em linha com jQuery

Question

Eu estou tentando mostrar e ocultar um elemento inline (por exemplo, uma span) usando jQuery.

Se eu só uso de alternância (), ele funciona como esperado, mas se eu usar alternância ( "lento") para dar-lhe uma animação, ela transforma o espaço em um elemento de bloco e, portanto, insere pausas.

é a animação possível com elementos em linha? Eu preferiria um deslizamento suave, se possível, em vez de um fade in.

<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() tem um monte de coisas estranhas com ele, inclusive escondendo ou transformação de elementos estranhos às vezes. aqui está uma solução semelhante:

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

Editar : aqui está uma maneira de adicionar deslizamento suave, com o mínimo de marcação HTML extra:

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

Apenas um CSS-propriedade vai fazer você feliz: http: //terion-fallen.livejournal .com / 332945.html

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

Answer 3

Eu não acho que é possível assim. A única maneira que eu poderia pensar em fazer seria para animar a sua opacidade entre 0 e 1, e, usando um callback na animação, em seguida, transformá-lo ligado ou desligado.

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

Answer 4

Como outras respostas têm mostrado, desaparecendo é possível. No entanto, eu não acho que "deslizamento suave" será. Simplificando, uma propriedade específica do elemento tem de ser animado. Uma extensão de linha como você menciona não tem altura ou largura específica, embora não têm uma opacidade.

Answer 5

Eu não acho que o que você quer fazer é possível até display: inline-block é bem suportado em todos os navegadores. Por agora, eu acho que eu iria desaparecer o fundo para vermelho, e, em seguida, ocultar o elemento.

Se display: inline-block foi bem apoiado, você pode mudar o estilo para inline-block, em seguida, animar a largura ou a altura, mas infelizmente isso não vai funcionar muito bem estes dias. Talvez em 2010:)

Answer 6

O fato de que as mudanças 'animar' o que está animando a um elemento de bloco não é um problema se o que você está tentando deslizar para a esquerda ou direita é posicionado com float: left e tudo o que está ao lado dele também está posicionada com float: esquerda

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

Se #btnUpdateButton é denominado com o seguinte, em seguida, ele desliza muito bem e empurra o conteúdo para a direita.

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