如何使用jQuery動畫更改背景圖片？

我想用緩慢的動畫來更改背景圖片，但它不工作如何使用jQuery動畫更改背景圖片？

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

有什麼錯的語法！

來源

2011-01-07 getaway

什麼是不工作？速度還是其中的任何一點？ – 2011-01-07 22:48:26

現在圖像不出來！當我點擊功能事件！ – getaway 2011-01-07 22:49:09

您可以通過將圖像不透明度淡入0來獲得類似效果，然後更改背景圖像，最後再次將圖像淡入。

這將需要一個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}); 
    });

你可以得到更多的交叉作用，通過使在這一個，然後你就可以在褪色上的第二背景股利。

來源

2011-01-07 22:51:49

從jQuery文檔：

性質是非數字不能使用基本的jQuery 功能進行動畫處理。（例如，寬度，高度，或左可以是動畫但背景顏色是不可能的。）

來源：

來源

2011-01-07 22:48:54

實際上背景顏色可以是動畫！ ive試過了 – getaway 2011-01-07 22:51:11

@getaway使用jQuery UI？或者一些插件？ – 2011-01-07 22:52:14

不能動畫加法/更換背景圖像的。該URL是否存在或不存在。狀態之間沒有。

來源

2011-01-07 22:49:08 user113716

實現這可能是的onclick添加的方式帶有背景圖像的新課程。然後爲此添加動畫？或淡出圖像以揭示新圖像？

來源

2011-01-07 22:52:17 diagonalbatman

我會用一個虛假的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>

來源

2011-01-07 23:01:19 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) 
    });  
});

來源

2016-07-06 09:29:06 yPhil

如何使用jQuery動畫更改背景圖片？

回答

相關問題