web-dev-qa-db-fra.com

Comment modifier l'image d'arrière-plan à l'aide de l'animation jQuery?

Je veux changer l'image de fond en utilisant une animation lente, mais ça ne marche pas

 $('body').stop().animate({background:'url(1.jpg)'},'slow');

Y at-il quelque chose de mal avec la syntaxe !!

jqueryimageanimationbackground
18
getaway

Vous pouvez obtenir un effet similaire en atténuant l'opacité de l'image à 0, puis en modifiant l'image d'arrière-plan et en réajustant l'image à nouveau.

Cela nécessitera une div, derrière tout le reste de votre page qui est aussi large que le corps.

<body>
    <div id="bg"></div>
    ...
</body>

Vous pouvez le rendre aussi large que la page en utilisant CSS:

#bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Et puis animer ses propriétés.

$('#bg')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': 'url(1.jpg)'})
            .animate({opacity: 1});
    });

Vous pouvez obtenir davantage d’effet de croisement en plaçant une deuxième division d’arrière-plan au-dessus de celle-ci, que vous pouvez ensuite fondre.

47
Marcus Whybrow

À partir de la documentation jQuery: 

les propriétés non numériques ne peuvent pas être animé à l'aide de base jQuery fonctionnalité. (Par exemple, width, Height ou left peuvent être animés mais Background-color ne peut pas l'être.)

Source: http://api.jquery.com/animate/

1
Šime Vidas

Vous ne pouvez pas animer l'ajout/le remplacement d'une image d'arrière-plan. L'URL est là ou non. Il n'y a pas d'état intermédiaire.

1
user113716

J'utiliserais une fausse div pour couvrir l'arrière-plan en tant qu'élément fixe, puis animer cet élément, à savoir:

<div id="bgDiv" style='display:none;background:URL("Water lilies.jpg");position:fixed; width: 100%; height: 100%; z-index: -1'></div>
<script type="text/javascript"> 
    $(document).ready(function(){  
        $('#bgDiv').toggle(1000); //You can plugin animate function here.

    }); 
</script>
0
Chandu

Voici comment je l'ai fait:

$(this).animate({
    opacity: 0
}, 100, function() {
    // Callback
    $(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
        // Callback of the callback :)
        $(this).animate({
            opacity: 1
        }, 600)
    });    
});
0
yPhil

Pour y parvenir, il suffit d’ajouter une nouvelle classe contenant l’image d’arrière-plan. Ensuite, animez-la?

0
diagonalbatman