Autor |
Nachricht |
Paul_Tergeist
Threadersteller
Dabei seit: 07.04.2005
Ort: Kulturerbe Zollverein
Alter: 46
Geschlecht:
|
Verfasst Fr 06.05.2011 12:52
Titel [jQuery] .after mit .fadeIn().fadeOut() ? |
|
|
hi leute,
ich habe folgendes problem:
ich möchte ein bild, dass ich per .after einfüge, erst einfaden und dann wieder ausfaden.
das einfügen klappt erstmal problemlos über
$(this).after('<img src="img/img.png" class="icon">');
wenn ich aber nun im anschluß
$('img.icon').fadeIn(2000).fadeOut(2000);
ausführe, kommt nur das .fadeOut (das bild startet nach dem
einfügen durch .after direkt mit voller sichtbarkeit.)
hätte da jemand einen tipp für mich, wie ich das lösen könnte?
|
|
|
|
|
DerM
Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht:
|
Verfasst Fr 06.05.2011 12:54
Titel
|
|
|
Du brauchst einen Delay
Code: |
$(elem)
.fadeIn(1000)
.delay(1000)
.fadeOut(1000);
|
http://api.jquery.com/delay/
|
|
|
|
|
Anzeige
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Fr 06.05.2011 13:36
Titel
|
|
|
Oder du nutzt einfach einen Callback
$('img.icon').fadeIn(2000,function(){
$(this).fadeOut(2000);
})
|
|
|
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Fr 06.05.2011 13:36
Titel
|
|
|
ich glaube er meint was anderes, da er das element dynamisch einfügt.
eine möglichkeit wäre zb: http://jsfiddle.net/a5Xgw/
Code: |
$(function(){
$('a').click(function(e){
e.preventDefault();
$img = $('<img/>').attr('src','img/img.png').addClass('icon').hide();
$(this).after($img);
$img.fadeIn().fadeOut();
});
});
|
Zuletzt bearbeitet von choise am Fr 06.05.2011 13:37, insgesamt 1-mal bearbeitet
|
|
|
|
|
Paul_Tergeist
Threadersteller
Dabei seit: 07.04.2005
Ort: Kulturerbe Zollverein
Alter: 46
Geschlecht:
|
Verfasst Fr 06.05.2011 17:27
Titel
|
|
|
danke für eure tipps!
ich habs aber dann doch anders gelöst: ich habe der klasse img.icon von vornherein "display: none" verpasst.
so startet das icon direkt versteckt, und das .fadeIn greift.
die variante von choise funktionierte zwar auch, aber da ist das problem, dass jQuery dem erstellten img "display:block" verpasst, was mir das layout verschiebt :-/
sahnemuh: deine variante führt zum gleich ergebnis wie mein ansatz. aber da das img immernoch eingeblendet startet greift auch da das .fadeIn nicht
DerM: der .delay hift da auch nicht
|
|
|
|
|
DerM
Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht:
|
Verfasst Fr 06.05.2011 18:41
Titel
|
|
|
Code: |
$(elem)
.hide() // <-- new line
.fadeIn(1000)
.delay(1000)
.fadeOut(1000);
|
|
|
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Fr 06.05.2011 19:03
Titel
|
|
|
Davon abgesehen, warum sich mir nicht erschließt, wieso Du das Bild über .after erzeugst, würde ich es so machen:
http://jsfiddle.net/3njsU/
Callback ist schon die richtige Variante. Im Ggs. zu Spielchen mit delay wird hier sichergestellt, dass das Fadein abgeschlossen wurde.
|
|
|
|
|
|
|
|
Ähnliche Themen |
jQuery animate/fadeOut-Problem
jquery fadein beim Laden der Page
fadeIn
Flash / Hintergrund abdunkeln / Fadeout
jQuery Plugin - Slider als Input wie in jQuery UI
jquery - hide content in jquery object
|
|