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 !!
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.
À 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/
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.
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>
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)
});
});
Pour y parvenir, il suffit d’ajouter une nouvelle classe contenant l’image d’arrière-plan. Ensuite, animez-la?