jQuery fadeToggle als Inline-Element

[peterM]

Hi

Wenn ich ein Element mit jQuery einblenden lasse (zB fadeToggle) wird es automatisch als block-element (display:block) gesetzt. Ich bracuhe das Element aber unbedingt als inline-Element. Wie kann ich das verwirklichen? Würde gerne die Effekte beibehalten.

Grüße

[Gunnar Bittersmann]

@@peterM:

nuqneH

Wenn ich ein Element mit jQuery einblenden lasse (zB fadeToggle) wird es automatisch als block-element (display:block) gesetzt. Ich bracuhe das Element aber unbedingt als inline-Element. Wie kann ich das verwirklichen?

Mit CSS-Transitions (mit Vendor-Präfixen).

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, peterM!

Wenn ich ein Element mit jQuery einblenden lasse (zB fadeToggle) wird es automatisch als block-element (display:block) gesetzt. Ich bracuhe das Element aber unbedingt als inline-Element. Wie kann ich das verwirklichen? Würde gerne die Effekte beibehalten.

Entweder jQuery, dann display: inline (Spezifität beachten)
oder CSS, siehe Gunnars Posting

Matthias

[molily]

Wenn ich ein Element mit jQuery einblenden lasse (zB fadeToggle) wird es automatisch als block-element (display:block) gesetzt. Ich bracuhe das Element aber unbedingt als inline-Element. Wie kann ich das verwirklichen? Würde gerne die Effekte beibehalten.

Du kannst direkt mit animate und Complete-Callbacks arbeiten:

.animate({ opacity: 0 }, 'slow', function () {
  $(this).css('display', 'none');
})
bzw.
.animate({ opacity: 1 }, 'slow', function () {
  $(this).css('display', 'inline');
})

Vielleicht geht auch einfach .show() bzw. .hide(). jQuery sollte automatisch den richtigen display-Wert verwenden, indem es von dem gesetzten ausgeht. D.h. wenn der Startwert »inline« ist, dann setzt hide() den Wert auf »none« und show() den Wert zurück auf »inline«.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Vielleicht geht auch einfach .show() bzw. .hide().

[link:http://api.jquery.com/toggle/@title=toggle()].

jQuery sollte automatisch den richtigen display-Wert verwenden, indem es von dem gesetzten ausgeht. D.h. wenn der Startwert »inline« ist, dann setzt hide() den Wert auf »none« und show() den Wert zurück auf »inline«.

Das tut toggle() auch.

Mir ist nur nicht klar, warum man dafür JavaScript (und gar nch mit jQuery) verwenden möchte.

Qapla'

[molily]

Vielleicht geht auch einfach .show() bzw. .hide().

[link:http://api.jquery.com/toggle/@title=toggle()].

Das geht (beim Starten der Animation) von einem spezifischen Wert aus, der (zum Ende der Animation) nicht gegeben sein muss. show/hide ist da eindeutiger.

Mir ist nur nicht klar, warum man dafür JavaScript (und gar nch mit jQuery) verwenden möchte.

Keine Ahnung, ich kenne ja den Anwendungsfall nicht, um hier für das eine oder das andere plädieren zu können oder die konkreten Vor- und Nachteile diskutieren zu können…

Mathias