JavaScript jQuery Hintergrund faden wärend geändert wurde

[PEASANT KING]

Hallo Leute,

ich habe gerade ein Logikproblem, soll vorkommen.

Ich bastel gerade ein wenig mit JQuery rum soweit so gut hier mal mein Code:

jQuery(document).ready(function () {
    jQuery(".lesson").mouseover(function () {

        var img = jQuery(this).css("background");
        
        jQuery(this).css({
            "background": "#333",
            "cursor": "pointer"
        });

        jQuery(this).mouseout(function () {

            jQuery(this).css({
                "background": img,
                "cursor": "default"

            });
        });
    });
});

Ich würde gerne, wenn der Hintergrund mittels MousOver oder MouseOut verändert wird, es smooth passiert mittels fadeIn(), fadeOut() wo setz ich da an. Von der Logik her muss doch nachdem der Background geswitched wurde gefadet werden richtig ?

        jQuery(this).css({
            "background": "#333",
            "cursor": "pointer"
        }).fadeOut('slow');

Geht aber in die Hose da er ja das Bild fadet was schon geändert wurde.
Ich bin leider nicht so der Experte in JavaScript, ich denke aber eher es liegt gerade an einer Logik Barriere.

Oder schreiben wir es noch etwas anders, ich hätte gern einen Transition Effekt von einem Hintergrundbild in eine Hintergrundfarbe.

 

[ZachBen]

Wende die fade()-Methode direkt auf dein Element an und ändere dann darin deinen Background:

$('#elem').fadeTo('slow', 0.3, function()
{
    $(this).css('background-image', 'url(' + $img + ')');
}).fadeTo('slow', 1);

In deinem Fall quasi:

jQuery(this).fadeTo('slow', 0.3, function()
{
    $(this).css({
            "background": "#333",
            "cursor": "pointer"
        })
}).fadeTo('slow', 1);

Ungetestet, da ich keine Beispielseite dafür erstellen wollte. Entweder nachliefern oder es reicht so

 

[PEASANT KING]

Danke für die schnelle Antwort. Ich habe es komfortabler gestaltet ohne Code overload ich benutze nun css Transition

.bass {
    float: left;
    margin: 5px;
    height: 181px;
    width: 273px;
    background: url(../img/bass_small.jpg);
    -webkit-transition:background 1s;
    -moz-transition:background 1s;
    -o-transition:background 1s;
    transition:background 1s
}

.bass:hover {
    background: #333;
}

Danke trotzdem!

 

[trialgod]

.fadeIn() und .fadeOut() sind mehr oder weniger festgelegte Transitions. Die sind für dein Beispiel ungeeignet.

Du kannst das, soweit ich weiß mit .animate machen. Besser wäre es das mit reinem CSS zu lösen. Beispiel:
http://jsfiddle.net/oy7djc31/