影響內容的JQuery動畫背景漂浮在它上面

我設置了一個jQuery動畫來更改網站標題的div上的背景圖像。影響內容的JQuery動畫背景漂浮在它上面

圖像比其容器大，並且在動畫製作時（對於動畫的持續時間而言），其周圍的元素會短暫隱藏。

我可能錯過了明顯的東西，任何人都可以幫忙嗎？

jQuery的下方，並且例如在這裏：

（例如現在刪除，但可以通過與另一種格動畫一個div的背景圖像被複制（用背景）浮在頂部）

var currentBackground = 1; 

function changeHeader() { 
currentBackground++; 
    if (currentBackground>6) currentBackground = 1; 

     jQuery('.slider').fadeOut(1000,function() { 
      jQuery('.slider').css('background', 'url(\'/myurl/images/sliders/home- slide'+currentBackground+'.jpg\') no-repeat center'); 
      jQuery('.slider').fadeIn(1000); 
    }); 

    setTimeout(changeHeader,10000); 
} 


jQuery(document).ready(function($){ 
    setTimeout(changeHeader,10000); 
})

來源

2012-01-04 Oli Stockman

你shouldn't調用'setTimeout（）'兩次，而不是函數本身。 – Stefan 2012-01-04 10:10:02

你是什麼意思，我可能錯過了明顯的東西，任何人都可以幫忙嗎？我們怎麼才能知道你在這個動畫中面臨的問題......可以請你解釋一下。 – Murtaza 2012-01-04 10:12:48

感謝Stefan，現在全部排序，我會在我的6小時限制結束後發佈！ – 2012-01-04 11:38:52

解決了這個問題，非常感謝Aram的代碼和Stefan讓我有點不同的想法。

關鍵是要設置一個Z-指數低於在下面jQuery語句的其他網頁元素（它似乎不工作的時候只適用於CSS類）：

var currentBackground = 1; 

function changeHeader() { 
    currentBackground++; 

    if (currentBackground>6) currentBackground = 1; 

    jQuery('.slider').fadeOut(1000,function() { 
     jQuery('.slider').css({'background-image': 'url(\'/myurl/images/sliders/home- slide'+currentBackground+'.jpg\')', 
           'background-repeat': 'no-repeat', 
           'background-position': 'center', 
           'z-index': '-1'}); 
     jQuery('.slider').fadeIn(1000); 
    }); 

    setTimeout(changeHeader,10000); 
} 


jQuery(document).ready(function($){ 
    setTimeout(changeHeader,10000); 
})

來源

2012-01-04 19:31:57

財產以後這樣的，你可以給一個background-image大小

if (currentBackground>6) currentBackground = 1; 

     jQuery('.slider').fadeOut(1000,function() { 
      jQuery('.slider').css({'background-image': 'url(\'/myurl/images/sliders/home- slide'+currentBackground+'.jpg\')', 
            'background-repeat': 'no-repeat', 
            'background-position': 'center', 
            'background-size': '100px 100px'}); 
      jQuery('.slider').fadeIn(1000); 
    });

來源

2012-01-04 10:01:02

謝謝大家的幫助，Aram，背景大小給了我圖像縱橫比的問題，但我發現在JQuery CSS語句中強制Z-Index修復了它（這似乎在褪色）... – 2012-01-04 11:30:05

$.fadeOut()使用opacity和影響您的菜單#nav位於滑塊#slider_1的上方。

來源

2012-01-04 10:17:13 Stefan

影響內容的JQuery動畫背景漂浮在它上面

回答

相關問題