Animazione di elementi incorporati con jQuery

Question

Sto cercando di mostrare e nascondere un elemento inline (ad esempio un intervallo) usando jQuery.

Se uso solo toggle (), funziona come previsto, ma se uso toggle (" slow ") per dargli un'animazione, trasforma l'intervallo in un elemento a blocchi e quindi inserisce delle interruzioni.

L'animazione è possibile con elementi incorporati? Preferirei uno scorrimento scorrevole, se possibile, piuttosto che una dissolvenza.

<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 () ha un sacco di cose strane con esso, incluso nascondere o trasformare elementi strani a volte. ecco una soluzione simile:

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

modifica : ecco un modo per aggiungere scorrevolezza, con markup HTML extra minimo:

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 proprietà CSS ti renderà felice: http: //terion-fallen.livejournal .com / 332945.html

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

Answer 3

Non credo sia possibile in questo modo. L'unico modo in cui potrei pensare di farlo sarebbe quello di animare la sua opacità tra 0 e 1 e, usando un callback sull'animazione, quindi accenderlo o spegnerlo.

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

Answer 4

Come hanno mostrato altre risposte, è possibile lo sbiadimento. Tuttavia, non credo che "scorrevolezza regolare". sarà. In poche parole, una proprietà specifica dell'elemento deve essere animata. Un intervallo inline come menzionato non ha altezza o larghezza specifiche, sebbene abbia un'opacità.

Answer 5

Non credo che ciò che vuoi fare sia possibile fino alla visualizzazione: inline-block è ben supportato su tutti i browser. Per ora, penso che vorrei sfumare lo sfondo in rosso, e quindi nascondere l'elemento.

Se display: inline-block era ben supportato, puoi cambiare lo stile in inline-block, e quindi animare la larghezza o l'altezza, ma sfortunatamente non funzionerà molto bene in questi giorni. Forse nel 2010 :)

Answer 6

Il fatto che 'animare' cambi ciò che sta animando in un elemento a blocchi non è un problema se ciò che stai cercando di far scorrere a sinistra o a destra è posizionato con float: left e qualunque cosa sia accanto ad esso è posizionata anche con float: sinistra

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

se #btnUpdateButton ha lo stile seguente, scorre abbastanza bene e sposta il contenuto verso destra.

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