Bild Fade zu neues Bild auf Hover

Question

Ich versuche, das Hintergrundbild eines Div zu ändern, wenn ein Benutzer auf ein Element auf der Seite schwebt. Ich weiß, es muss einen besseren Weg geben, dies zu tun ... Das ist es, was ich jetzt habe.

'# 11' ist das Div, über das sich die Maus bewegt.

‚#treeBG‘ ist der div, dessen Hintergrundbild sollte

Aktuelles Bild ändern ist bg.jpg und ich möchte, dass verblassen und blur.jpeg in verblassen, an seinem Platz.

$(function() { 
 
    $('#11').hover(function() { 
 
    $('#treeBG').css('background-image', 'url("blur.jpeg")'); 
 
     $('#treeBG').css('width', '100%'); 
 
     $('#treeBG').css('background-size', 'cover'); 
 
     $('#treeBG').css('background-repeat', 'no-repeat'); 
 
    }, function() { 
 
    \t // on mouseout, reset the background image 
 
    $('#treeBG').css('background-image', 'url("blur.jpeg")'); 
 
    }); 
 
});

Ich habe das Bild kein Problem ändern, will ich es nur einen Fade Übergang haben, schöner aussehen.

Irgendwelche Ideen?

Answer 1

$('#treeBG').fadeOut('slow',function(){ 
    $('#treeBG').css('background-image', 'url("blur.jpeg")'); 
    $('#treeBG').css('width', '100%'); 
    $('#treeBG').css('background-size', 'cover'); 
    $('#treeBG').css('background-repeat', 'no-repeat'); 
    $('#treeBG').fadeIn('slow'); 
}); 

Versuchen so

Answer 2

Hier ist eine Demo zu tun: https://jsfiddle.net/y4orwqqu/1/

First off Sie div id ist nicht mit einer Zahl beginnen. Also habe ich es als Text aktualisiert.

$(function() { 
    $('#eleven').hover(function() { 
    $('#treeBG').css('background', '#000000'); 
     $('#treeBG').css('width', '100%'); 
     $('#treeBG').css('background-size', 'cover'); 
     $('#treeBG').css('background-repeat', 'no-repeat'); 
    }, function() { 
    // on mouseout, reset the background image 
    $('#treeBG').css('background', '#FFFFFF'); 
    }); 
}); 

Answer 3

In meinem Fall # 11 numerische ID hat nicht funktioniert ... so änderte ich #eleve. Versuchen Sie diesen Code:

$('#eleven').hover(function(){ 

    $('#treeBG').fadeOut('slow',function(){ 
     $(this).css({ 
     'background-image': 'url("blur.jpeg")', 
     'width' : '100%', 
     'background-size' : 'cover', 
     'background-repeat':'no-repeat' 
    }).fadeIn('slow'); 

    }); 
    },function(){ 
    $('#treeBG').css({ 
     'background-image': 'url("blur.jpeg")'}); 
    }); 

Answer 4

Verwendung von reinem Css die saubere Art und Weise ist, das zu tun:

style.css

<!-- Change #11 for #eleven or whatever which don't start with numbers. Check out how to use IDs in Css. I recommend you use classes instead Ids by using styles --> 
#eleven { 
    background-color: blue; 
    padding: 1%; 
    width: 50%; 
    text-align: center; 
    color: white; 
} 
<!-- This syntaxis says: change #threeBG when #eleven is hover --> 
#eleven:hover ~ #treeBG { 
    background-image: url("blue.png"); 
    width: 100%; 
    background-size: cover; 
    background-repeat: no-repeat; 
}