2015-04-21 27 views
2

我對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() 

這已停止動畫從播放一遍又一遍,所以它越來越近。但是,當您從一個鏈接快速跳到下一個鏈接時,沒有淡入淡出動畫。

當我從一個鏈接跳到另一個鏈接時,我想要做的事情是首先完成淡出動畫,然後淡入當前的動畫,如果可能的話。

回答

1

如果您使用css轉換屬性,它們將更好地轉換。轉換不適用於background-image屬性,但如果將圖像疊放在彼此之上,則可以轉換它們的不透明度。

例子:

<div class="menu-background"> 
    <div class="bg-0 bgimage"></div> 
    <div class="bg-1 bgimage"></div> 
    <div class="bg-2 bgimage"></div> 
</div> 

然後更新您的CSS:

.bgimage { 
    opacity: 0; 
    transition: opacity 0.5s ease-in; 
} 

.bgimage.active { 
    opacity: 1; 
} 

.bg-0 { 
    background-image: url('images/menu1/background1.jpg'); 
} 
... 

而且在你的JavaScript,

$(".bgButton").hover(
    function() { 
    var index = $("li").index(this); 
    $(".bg-" + index).addClass('active'); 
    }, function() { 
    $(".bgimage").removeClass('active'); 
    } 
); 
+0

這是完美的!謝謝! – ElectricMainline

1

您提到的問題是因爲動畫(fadeIn和fadeOut)尚未完成時,另一個動畫開始。在調用fadeIn和fadeOut之前,要停止正在運行的動畫,請調用$(".bgimage").stop()