JavaScript jQuery Hintergrund faden wärend geändert wurde

PEASANT KING · 28. Oktober 2014

Hallo Leute,

ich habe gerade ein Logikproblem, soll vorkommen.

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

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 ?

Code:

        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 · 28. Oktober 2014

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

Code:

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

In deinem Fall quasi:

Code:

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 · 28. Oktober 2014

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

Code:

.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 · 28. Oktober 2014

.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/

Suche

JavaScript jQuery Hintergrund faden wärend geändert wurde

PEASANT KING

Commander

ZachBen

Newbie

PEASANT KING

Commander

trialgod

Lt. Commander

Ähnliche Themen