web-dev-qa-db-ja.com

jQueryアニメーションを使用して背景画像を変更するにはどうすればよいですか？

遅いアニメーションを使用して背景画像を変更したいのですが、機能しません

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

構文に何か問題があります!!

jqueryimageanimationbackground
18
getaway

画像の不透明度を0にフェードしてから背景画像を変更し、最後に画像を再びフェードインすることで、同様の効果を得ることができます。

これには、ページの他のすべての背後にあるbodyと同じ幅のdivが必要です。

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

CSSを使用して、ページと同じ幅にすることができます。

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

そして、そのプロパティをアニメーション化します。

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

2つ目の背景divをこのdivの上に置くことで、さらにクロスオーバー効果を得ることができ、それをフェードインできます。

47
Marcus Whybrow

JQueryドキュメントから：

数値以外のプロパティは、基本的なjQuery機能を使用してアニメーション化できません。 （たとえば、幅、高さ、または左はアニメーション化できますが、背景色はアニメーション化できません。）

ソース： http://api.jquery.com/animate/

1
Šime Vidas

背景画像の追加/置換をアニメーション化することはできません。 URLが存在するかどうか。間に状態はありません。

1
user113716

私は、faux divを使用して固定要素として背景をカバーし、その要素をアニメーション化します：

<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

ここに私がそれをした方法があります：

$(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

これを実現する方法は、onclickで背景画像を含む新しいクラスを追加することです。その後、これをアニメートしますか？または、画像をフェードアウトして新しい画像を表示しますか？

0
diagonalbatman