Animieren von Inline-Elementen mit jQuery

Question

Ich versuche, ein Inline-Element (z. B. einen Bereich) mit jQuery ein- und auszublenden.

Wenn ich nur toggle() verwende, funktioniert es wie erwartet, aber wenn ich toggle ("slow") verwende, um eine Animation zu erhalten, verwandelt es den Bereich in ein Blockelement und fügt daher Brüche ein.

Ist Animation mit Inline-Elementen möglich? Ich würde eine glatte möglichst Gleiten bevorzugen, anstatt eine Einblendung.

<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() hat eine Reihe von seltsamen Dinge mit ihm, darunter versteckt oder ungerade Elemente manchmal zu verwandeln. hier ist eine ähnliche Lösung:

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

bearbeiten: hier ist ein Weg, sanftes Gleiten, mit minimalem zusätzlichem HTML-Markup hinzuzufügen:

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

Ich glaube nicht, es so möglich ist. Die einzige Möglichkeit, dies zu tun, wäre, die Deckkraft zwischen 0 und 1 zu animieren und mit einem Callback für die Animation ein- oder auszuschalten.

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

Answer 3

Wie andere Antworten haben gezeigt, ist Fading möglich. Ich denke jedoch nicht, dass "sanftes Gleiten" sein wird. Einfach gesagt, eine bestimmte Eigenschaft des Elements muss animiert werden. Eine Inline-Spanne wie Sie erwähnen, hat keine spezifische Höhe oder Breite, obwohl sie eine Opazität hat.

Answer 4

Ich glaube nicht, was Sie tun möchten, ist bis zur Anzeige möglich: Inline-Block wird über Browser hinweg gut unterstützt. Für jetzt denke ich, dass ich den Hintergrund auf rot verblasse und dann das Element verberge.

Wenn Anzeige: Inline-Block wurde gut unterstützt, könnten Sie den Stil in Inline-Block ändern, und dann die Breite oder Höhe animieren, aber das wird leider nicht sehr gut in diesen Tagen. Vielleicht im Jahr 2010 :)

Answer 5

Die Tatsache, dass 'animate' ändert, was es zu einem Blockelement animieren ist kein Problem, wenn das, was Sie nach links oder rechts schieben möchten, mit float: links und was auch immer ist links

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

wenn #btnUpdateButton mit den folgenden Stil wird dann gleitet es ganz gut und der Inhalt nach rechts schiebt: ist auch mit Schwimmer positioniert.

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

Answer 6

Nur eine CSS-Eigenschaft wird Sie glücklich machen: http://terion-fallen.livejournal.com/332945.html

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