Animando elementos en línea con jQuery.

Question

Estoy tratando de mostrar y ocultar un elemento en línea (por ejemplo, un tramo) usando jQuery.

Si solo uso toggle (), funciona como se esperaba, pero si uso toggle (" slow ") para darle una animación, convierte el tramo en un elemento de bloque y, por lo tanto, inserta saltos.

¿Es posible la animación con elementos en línea? Preferiría un deslizamiento suave si es posible, en lugar de un fundido.

<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 () tiene un montón de cosas extrañas, como ocultar o transformar elementos impares a veces. Aquí hay una solución similar:

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

editar : aquí hay una manera de agregar un deslizamiento suave, con un mínimo de marcado HTML adicional:

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

Solo una propiedad CSS le hará feliz: http: //terion-fallen.livejournal .com / 332945.html

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

Answer 3

No creo que sea posible así. La única forma en que podría pensar en hacerlo sería animar su opacidad entre 0 y 1, y, mediante una devolución de llamada en la animación, activarla o desactivarla.

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

Answer 4

Como han demostrado otras respuestas, el desvanecimiento es posible. Sin embargo, no creo que " deslizamiento suave " estarán. En pocas palabras, una propiedad específica del elemento tiene que ser animada. Un tramo en línea como usted menciona no tiene una altura o anchura específica, aunque sí tiene una opacidad.

Answer 5

No creo que lo que quieres hacer sea posible hasta que se muestre: inline-block es compatible con todos los navegadores. Por ahora, creo que cambiaría el fondo a rojo y luego ocultaría el elemento.

Si display: inline-block fue bien soportado, puedes cambiar el estilo a inline-block, y luego animar el ancho o la altura, pero desafortunadamente eso no funcionará muy bien en estos días. Tal vez en 2010 :)

Answer 6

El hecho de que 'animar' cambie lo que está animando a un elemento de bloque no es un problema si lo que intentas deslizar hacia la izquierda o hacia la derecha se posiciona con flotar: a la izquierda y todo lo que está junto a él también se posiciona con flotar: izquierda

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

Si #btnUpdateButton tiene el siguiente estilo, se desliza muy bien y empuja el contenido hacia la derecha.

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