JavaScript Funktionserweiterung

[vitus37]

Heyho,

habe mir gerade ein JavaScript gebastelt, welches onMouseOver den Hintergrund eines Elements wechselt.
Das funktioniert soweit wunderbar. :)

Jetzt möchte ich die Funktion aber so erweitern, dass der Hintergrund langsam gewechselt wird, also mit einem Überblende-Effekt.

Google hat mir mekrwürdige Ergebisse ausgeworfen, habe nicht irgendwie eine Funktion gefunden, welche überall angewandet wird. Jeder löst das anscheinend anders...

Hier mal das JavaScript:

<script type="text/javascript">
    function ExplorerLight(){
	    document.getElementById('explorer').style.background='url(img/explorer.png)';
    }
</script>

Könntet ihr mir vieleicht helfen, wie ich das am besten vervollständige?

P.S. Habe etwas gelesen, dass das nur im IE (per ActiveX) möglich ist, stimmt das?

Liebe Grüße
Vitus

 

[mermshaus]

Schau dir mal jQuery oder so an: Effects – jQuery API
Oder spezieller das hier: 23 jQuery Fade in Fade out Effect - Toolbox - Geek Sucks
Oder noch spezieller das hier: A Simple jQuery Slideshow | Jon Raasch's Blog

 

[vitus37]

Danke für deine Antort!

Das ist der Effekt den ich meine, jedoch hapert es bei meinem Einbau noch daran, dass ich nicht ein Element erscheinen lassen möchte, sondern ein Hintergrund.

Ich probiere es mal weiter mit jQuery, vieleicht schaff ich es doch noch :), dennoch, weitere Lösungsvorschläge sind willkommen!

 

[vitus37]

Habe jetzt mal mit deinem 2. Link etwas rumgespielt und das ist dabei rausgekommen:

$(function() {
// OPACITY OF BUTTON SET TO 50%
$("#explorer").css("background","none");
 
// ON MOUSE OVER
$("#explorer").hover(function () {
 
// SET OPACITY TO 100%
$(this).stop().animate(
background: url(img/explorer.png)
, "slow");
},
 
// ON MOUSE OUT
function () {
 
// SET OPACITY BACK TO 50%
$(this).stop().animate({
background: none
}, "slow");
});
});

Funktionieren tut es aber leider noch nicht. Was mache ich da falsch? Kann es so überhaupt klappen?

 

[struppi]

Den Hintergrund kann man nicht animieren. Du brauchst ein Element, um die Eigenschaft opacity nutzen zu können.

 

[vitus37]

OK, danke, dann versuche ich mal ein Bild zu Hinterlegen. :)

Edit: Super hat geklappt! :)

 

[vitus37]

Ich hätte da nocheinmal eine Frage:

Und zwar habe ich diesen jQuery-Code:

$(".content").animate(
    {opacity: 0},
	2500
);

Jetzt möchte aber, dass wenn die animate-Funktion ausgeführt wurde, die Klasse .content in CSS mit display: none; versehen wird.

so habe ich es bereits probiert, da der vierte Parameter von anitmate ja das Callback ist, wenn die Funktion fertig durchgeführt wurde:

$(".content").animate(
    {opacity: 0},
	2500, 'linear',
        $('.content').css("display","none");
);

Wo liegt mein Fehler?

P.S. Der Hintergrund für die Funktion ist der, dass beim Klick auf einen Navilink der alte Content wieder ausgeblendet werden soll (alle Contents mit der Klasse "content") und dann wieder ein neuer kommt. Jedoch soll der alte nicht nur ausgeblendet werden, sondern auch ganz verschwinden eben. ;) Ich hoffe ihr verstehts.^^

Liebe grüße
Vitus

 

[mermshaus]

Ein Callback ist immer eine Funktion. Theoretisch also so:

$(".content").animate(
    {opacity: 0},
    2500,
    'linear',
    function () {
        $('.content').css("display", "none");
    }
);

Ob das so der beste Weg ist, weiß ich nicht.

 

[vitus37]

Danke für deine Antwort. :)

Hätte ich auch selbst drauf kommen können, habe es ja im Grunde genommen sogar selbst in meinem Post gesagt, dass es eine Funktion sein muss. xD

Nunja, jedenfalls hat das so auch nicht recht geklappt, deshalb habe ich nun nocheinmal alles gelöscht und neu angefangen, und siehe da, es klappt jetzt perfekt. Hatte wohl einfach eine Blockade im Denken. ^^

Liebe Grüße