ejemplos - Animar elementos en línea con jQuery

animaciones jquery w3schools

Question

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

Si uso simplemente toggle (), funciona como se esperaba, pero si utilizo alternar ("slow") 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 desvanecimiento.

<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

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 2

Como otras respuestas han demostrado, 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 3

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

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

Answer 4

toggle() tiene un montón de cosas extrañas, como ocultar o transformar elementos extraños 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 marcado HTML extra mínimo:

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 5

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

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

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

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

Answer 6

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

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