我對js和jquery很新,所以我寫了一些基本上做我想做的事情,但我確信有更好的方法來做到這一點。這也有點bug,所以我希望可以修復。jquery背景圖像淡入淡出 - 有沒有更好的方法來做到這一點?
我的網站在這裏http://www.madebyandrew.com我希望討論菜單,當您點擊頂部的「菜單」時,該菜單將顯示爲疊加層。
基本上我所做的是在它看起來像這樣
<ul id="menuList">
<li class="bgButton"><a href="#">NZSki</a></li><br/>
<li class="bgButton"><a href="#">Theta</a></li> <br/>
<li class="bgButton"><a href="#">Ports of Auckland</a></li> <br/>
<li class="bgButton"><a href="#">Total Compliance</a></li> <br/>
<li class="bgButton"><a href="#">Ted's Grooming Room</a></li> <br/>
<li class="bgButton"><a href="#">Coffee & Jam</a></li> <br/>
<li class="bgButton"><a href="#">Treble Seven</a></li> <br/>
<li class="bgButton"><a href="#">Diacle</a></li> <br/>
</ul>
當你將鼠標懸停在鏈接我想將有關圖像在後臺進行全屏顯示的HTML創建一個UL列表。要做到這一點,我創建了一個DIV入級bgimage,它具有以下CSS屬性:
.bgimage{
position:fixed;
z-index:-10;
width:100%;
height:100%;
background-size:cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
我已經創建了一個陣列來存儲我不同的背景圖像,我創建了一個變量,它採用高亮顯示的索引並使用它從數組中獲取正確的背景。然後,我使用.hover將鼠標懸停在其中一個鏈接上時將背景圖像淡入淡出。
var bgImg = ["url('images/menu1/background1.jpg')",
"url('images/menu1/background2.jpg')",
"url('images/menu1/background3.jpg')",
"url('images/menu1/background4.jpg')",
"url('images/menu1/background5.jpg')",
"url('images/menu1/background6.jpg')",
"url('images/menu1/background7.jpg')",
"url('images/menu1/background8.jpg')"];
$(".bgButton").hover(
function() {
var index = $("li").index(this);
$(".bgimage").css({
display: "none",
background: bgImg[index]
});
$(".bgimage").fadeIn(400);
}, function() {
$(".bgimage").fadeOut(200);
}
);
因此,這現在大致是我想要的。除此之外,它似乎是越野車。當我將鼠標懸停在鏈接上並快速移除鼠標時,背景圖像有時會閃爍。另外,如果我將鼠標懸停在鏈接上並快速移除鼠標,則fadeIn動畫必須在fadeOut可以開始之前完全完成,這意味着它不會覺得它正在響應。當你從一個鏈接快速移動到另一個鏈接時,也會出現問題,我想讓其中一個淡出,而另一個淡入。但是,由於我立即更改了背景圖像,因此無法執行此操作。
如果有人能指點我一個更好的方式來做到這一點,我將不勝感激,因爲我的知識不夠完美。
謝謝!
編輯
如建議通過以下Mitko,我已經加入
$(".bgimage").stop()
這已停止動畫從播放一遍又一遍,所以它越來越近。但是,當您從一個鏈接快速跳到下一個鏈接時,沒有淡入淡出動畫。
當我從一個鏈接跳到另一個鏈接時,我想要做的事情是首先完成淡出動畫,然後淡入當前的動畫,如果可能的話。
這是完美的!謝謝! – ElectricMainline