Animieren Inline-Elemente mit jQuery

Question

Ich versuche, ein Inline-Element (zB eine Spanne) mit jQuery ein- und ausblenden.

Wenn ich nur Toggle () verwenden, funktioniert es wie erwartet, aber wenn ich Knebel verwenden ( „slow“) ist es eine Animation zu geben, ist es die Spanne in einem Blockelement dreht und deshalb fügt bricht.

Ist Animation möglich mit Inline-Elemente? Ich würde eine glatte bevorzugen Gleiten, wenn möglich, 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 Dingen mit ihm, darunter versteckt oder ungeradeen Elementen manchmal zu verwandeln. hier ist eine ähnliche Lösung:

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

Bearbeiten : hier ist ein Weg, glatt hinzufügen Schiebt, mit minimalem zusätzlichem HTML-Code:

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

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

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

Answer 3

Ich glaube nicht, es so möglich ist. Der einzige Weg, ich denken konnte, zu tun, wäre es seine Undurchsichtigkeit zwischen 0 und 1 zu animieren, und einen Rückruf auf die Animation verwenden, dann schalten Sie ihn ein oder aus.

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

Answer 4

Wie andere Antworten haben gezeigt, Fading möglich. Allerdings glaube ich nicht „sanftes Gleiten“ wird. Einfach gesagt, hat eine spezifische Eigenschaft des Elements animiert werden. Eine Inline-Spanne, wie Sie hat keine bestimmte Höhe oder Breite erwähnen, obwohl es eine Opazität hat.

Answer 5

Das glaube ich nicht, was Sie wollen ist möglich zu tun, bis display: inline-block gut in allen Browsern unterstützt wird. Denn jetzt, ich denke, ich würde den Hintergrund rot verblassen, und dann das Element verbergen.

Wenn display: inline-block wurde gut unterstützt, könnte man den Stil Inline-Block, und dann die Breite oder Höhe animieren, aber leider das wird nicht sehr gut in diesen Tagen arbeiten. Vielleicht in 2010:)

Answer 6

Die Tatsache, dass ‚belebte‘ ändert, was es zu einem Block Elemente Animieren ist kein Problem, wenn das, was Sie versuchen, nach rechts oder links schieben mit Schwimmer positioniert ist: links und was ist daneben auch mit Schwimmer positioniert ist: links

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

Wenn #btnUpdateButton harmoniert ausgezeichnet mit dem folgenden dann ganz gut gleitet und schiebt den Inhalt nach rechts.

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