[gelöst] FadeTo - "blinkendes" Bild.
Eingetragen von DrupNewb (68)am 27.01.2011 - 10:58 Uhr in
Hi!
Ich arbeite mich grade etwas in Javascript ein und möchte das logischerweise gleich auf meiner Seite umsetzen.
Es geht darum, dass wenn ich mit der Maus über einen "Link" gehe, dass darauf hin das Bild rechts vom Link sich langsam einblendet und beim verlassen der Region des Linkes sich dieses Bild wieder langsam ausblendet.
Funktioniert auch teilweise ..
Das Bild blendet sich bei mir einfach immer ein, aus, ein, aus .. und das obwohl ich mit der Maus drauf bleibe. :/
Kann mir jmd. sagen was falsch läuft in meinem Code dazu?
<script type="text/javascript" language="JavaScript1.2">
$('#squeeze').mouseover(function() {
$('img').fadeTo('slow', 1, function() {
});
});
$('#squeeze').mouseout(function() {
$('img').fadeTo('slow', 0, function() {
});
});
</script>Ich habe mir dazu die jQuery UI als Modul runtergeladen und diesen Abschnitt Javascript in der View, wo das Bild etc. liegt, in den Kopfbereich eingefügt.
Grüße
- Anmelden oder Registrieren um Kommentare zu schreiben
Wenn Du schon mouseout
am 27.01.2011 - 11:27 Uhr
Wenn Du schon mouseout verwendest, solltest Du auch bei der ersten Funktion mouseenter benutzen. Daneben würde ich die leere Funktion im Aufruf weglassen (ist eh optional). Sonst kann ich keinen Fehler entdecken.
Beste Grüße
Werner
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
wla schrieb Wenn Du schon
am 27.01.2011 - 11:38 Uhr
Wenn Du schon mouseout verwendest, solltest Du auch bei der ersten Funktion mouseenter benutzen. Daneben würde ich die leere Funktion im Aufruf weglassen (ist eh optional). Sonst kann ich keinen Fehler entdecken.
Beste Grüße
Werner
Wenn ich mouseenter benutze, dann erscheint der gewünschte Effekt überhaupt nicht mehr.
Mir wird das Bild dann zwar direkt angezeigt, aber es soll ja .. ehm .. langsam aus dem Nichts erscheinen, sag ich mal.
Über CSS hab ich die Opacity für das Bild auf 0 gesetzt.
Grüße
Edit: Oder hat jmd. ne Idee wie ich das sonst noch umsetzen kann?
Mhm.
am 28.01.2011 - 09:20 Uhr
Ich push das noch einmal, weil ich echt immernoch keinen Lösungsansatz gefunden habe.
Überlegt habe ich mir, ob das nicht evtl. mit ner Schleife geht (quasi if img opacity unter 100, dann mach das und das, wenn nich, dann dies und jenes)? Allerdings selbst wenn das so geht, wüsste ich noch nicht, wie. :S
Morgendliche Grüße
hover()
am 28.01.2011 - 10:25 Uhr
Hallo.
Verwende .hover() und .stop().
<script type="text/javascript" language="JavaScript1.2">$('#squeeze').hover(
function() {
$('img').stop(true, true).fadeIn('slow');
},
function() {
$('img').stop(true, true).fadeOut('slow');
}
);
</script>
Ungetestet, sollte jedoch funktionierenhth,
Stefan
Tipp: Beachte die Verhaltensregeln des DrupalCenter.
Done!
am 28.01.2011 - 10:52 Uhr
Super, danke.
Jetzt funktionierts endlich wie ich es wollte. :)
(fast) Mittagliche Grüße!