Voglio cambiare l'immagine di sfondo con animazione lento, ma non il suo lavoroCome posso cambiare l'immagine di sfondo usando l'animazione jQuery?
$('body').stop().animate({background:'url(1.jpg)'},'slow');
C'è qualcosa di sbagliato con la sintassi !!
È possibile ottenere un effetto simile svanendo l'opacità dell'immagine su 0, quindi modificare l'immagine di sfondo e infine dissolvere nuovamente l'immagine.
Questo richiederà un div, dietro tutto il resto della pagina che è largo quanto il corpo.
<body>
<div id="bg"></div>
...
</body>
È possibile rendere il più ampio come la pagina utilizzando CSS:
#bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
E poi animare le sue proprietà.
$('#bg')
.animate({opacity: 0}, 'slow', function() {
$(this)
.css({'background-image': 'url(1.jpg)'})
.animate({opacity: 1});
});
Si potrebbe ottenere più di un effetto di crossover, avendo una seconda div sfondo in cima a questo, che è quindi possibile dissolvenza.
Ciò funzionerebbe, tranne che animerebbe anche l'opacità di tutto il contenuto di 'body'. Non sono sicuro che sia quello che OP sta cercando. – user113716
sei un genio !! – getaway
@patrick ovviamente, beh, non c'è modo che io sappia (senza un plugin) di animare l'opacità dello sfondo, quindi forse è necessario un po 'di HTML in più per ottenere questo effetto? –
Dalla documentazione jQuery:
proprietà che sono non numerico non può essere animati usando la funzionalità di base jQuery . (Per esempio, la larghezza, altezza, o di sinistra può essere animato ma background-color non può essere.)
Fonte:
Non è possibile animare l'aggiunta/sostituzione di un'immagine di sfondo. L'URL è lì o no. Non c'è stato intermedio.
Il modo per raggiungere questo obiettivo potrebbe essere quella di aggiungere onclick un nuova classe con l'immagine di sfondo in. Quindi animare questo? Oppure sfumare l'immagine per rivelarne una nuova?
puoi mostrarmi un esempio, im merda a questo !! – getaway
http://stackoverflow.com/questions/253689/switching-div-background-image-with-jquery Sono sull'iPhone quindi è difficile. Ma alcune delle risposte qui potrebbero aiutarti. – diagonalbatman
vorrei utilizzare un div finto per coprire lo sfondo come un elemento fisso e quindi animate che elemento cioè:
<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>
Ecco come ho fatto:
$(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)
});
});
ciò che non funziona? La velocità o qualcosa del genere? –
ora l'immagine non sta arrivando !! quando clicco evento funzione !! – getaway