Animar elementos en línea con jQuery

Question

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

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

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

<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 con él, incluyendo ocultar o transforman elementos extraños a veces. he aquí una solución similar:

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

edición: he aquí una manera de añadir 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

No creo que sea posible así. La única forma en que podría pensar en hacerlo sería animando su opacidad entre 0 y 1, y, usando una devolución de llamada en la animación, enciéndala o enciéndala.

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

Answer 3

Como otras respuestas tienen se muestra, el desvanecimiento es posible. Sin embargo, no creo que sea un "deslizamiento suave". En pocas palabras, una propiedad específica del elemento debe ser animada. Un tramo en línea como el que menciona no tiene una altura o ancho específico, aunque sí tiene una opacidad.

Answer 4

No creo que lo que quiera hacer es posible hasta la visualización: inline-block es bien soportado en todos los navegadores. Por ahora, creo que voy a desvanecer el fondo en rojo, y luego ocultar el elemento.

Si la visualización: inline-block fue bien soportada, puede cambiar el estilo a bloque en línea, y luego animar el ancho o alto, pero desafortunadamente eso no funcionará muy bien en estos días. Tal vez en 2010 :)

Answer 5

El hecho de que 'animar' cambie lo que está animando a un elemento de bloque no es un problema si lo que está tratando de deslizar hacia la izquierda o hacia la derecha se coloca con flotador: izquierda y lo que está al lado también se coloca con float: left

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

si #btnUpdateButton es de estilo con la siguiente continuación se desliza muy bien y empuja el contenido hacia la derecha.

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

Answer 6

Sólo una propiedad CSS-te hará feliz: http://terion-fallen.livejournal.com/332945.html

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