Chcę zmienić obraz tła przy użyciu powolnego animację, ale jej nie działaJak zmienić obraz tła za pomocą animacji jQuery?
$('body').stop().animate({background:'url(1.jpg)'},'slow');
Czy jest coś złego w składni !!
Można uzyskać podobny efekt, zmniejszając krycie obrazu do 0, a następnie zmienić obraz tła, a na koniec ponownie zacierając obraz.
Będzie to wymagało elementu div, za wszystkim innym elementem strony, który jest tak szeroki, jak ciało.
<body>
<div id="bg"></div>
...
</body>
Można zrobić to tak szeroka jak strony przy użyciu CSS:
#bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
A następnie animować jego właściwości.
$('#bg')
.animate({opacity: 0}, 'slow', function() {
$(this)
.css({'background-image': 'url(1.jpg)'})
.animate({opacity: 1});
});
Można dostać więcej od efektu zwrotnicy, poprzez drugą tła div na górze tej jednej, którą można następnie blakną.
To by działało, gdyby nie animowało nieprzezroczystości całej zawartości 'body'. Nie jestem pewien, po co jest OP. – user113716
Twój geniusz !! – getaway
@patrick, oczywiście, nie ma sposobu, w jaki znam (bez wtyczki), aby animować przezroczystość tła, więc może jakiś dodatkowy HTML jest wymagany do uzyskania tego efektu? –
Z dokumentacji jQuery:
właściwości, które są non-numeryczne nie mogą być animowane za pomocą podstawową funkcjonalność jQuery . (Na przykład, szerokość, wysokości, lub w lewo, mogą być animowane ale background-color nie może być.)
Źródło:
Nie można animować dodawanie/zastępowanie obraz tła. Adres URL jest tam albo nie. Nie ma pomiędzy stanem.
drogę do osiągnięcia tego celu może być onclick dodać nowa klasa z obrazem tła. Następnie animuj to? Albo zanik obrazu, aby odsłonić nowy?
możesz pokazać mi przykład, jestem taki gówno na to !! – getaway
http://stackoverflow.com/questions/253689/switching-div-background-image-with-jquery Jestem na iPhonie, więc jest to trudne. Ale niektóre z odpowiedzi tutaj mogą ci pomóc. – diagonalbatman
użyłbym div faux na pokrycie tle jako element stały i następnie animować tego elementu tj:
<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>
Oto jak to zrobiłem:
$(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)
});
});
co nie działa? Szybkość czy jakakolwiek? –
teraz obraz nie nadchodzi !! kiedy klikam wydarzenie funkcyjne !! – getaway