使用JQuery使閃爍種效果

Follwing換款背景圖像是我使用通過改變背景圖像對於每個imageobject我有一段週期以產生滑動器腳本的一部分..使用JQuery使閃爍種效果

 #Sliderimg - height is 500px, 

     $("#Sliderimg").css({ 
      "background-image": "url(../Images/" +SliderImageObj.image + ")", 
      "display": "block", 
      "z-index": "50px" 
     });

什麼可能出現這個錯誤，因爲我每次改變圖像時都會產生閃爍效果，我的問題與新圖像無法加載，閃爍（閃爍到屏幕底部）爲即將被替換的舊圖像。

來源

2012-06-13 user824910

w ^你是否每次要更新背景圖像時都要設置顯示和z-index屬性？最好將display和z-index屬性添加到CSS中。另外z-index：50px無效。 z-index採用整數值。 – Lowkase

你有截圖嗎？ – Grigor

你是否在你的圖片加載？如果不是，瀏覽器正在下載時可能會出現閃爍。 –

也許從您的z-index屬性中刪除「px」？它採用十進制值。

來源

2012-06-13 17:29:34

哈，斑點！ –

@ChrisFrancis謝謝:)但沒有人認識到：P –

我跟你們同意，我已經糾正了，但我仍然有同樣的問題 – user824910

您會看到閃爍，因爲每次更改背景圖像時，瀏覽器都必須先下載它，然後才能顯示背景。如果圖像不是太大（比如說5kb），你可以嘗試在瀏覽器中緩存它們，將它們應用到它們不會顯示的元素上。

另外，50px不是有效的z-index，該屬性只需要整數。

來源

2012-06-13 17:29:56 davethegr8

不正確的，正確的瀏覽器會緩存，而騎自行車的圖像，並記住這些，在作戰下載延遲。閃爍來自瀏覽器重繪項目的方式。 – Tschallacka

我的問題是不是與即將加載新的形象，它的舊圖像大約是閃爍要被替換 – user824910

這可能有助於有一個更具體的例子，因爲它是稍微難以分辨究竟是怎麼回事。 – davethegr8

瀏覽器被迫重繪整個背景。

這是怎麼做的是通過設置背景爲白色，然後重新繪製新的背景。

使用jquery.animate（）來解決這個問題。

來源

2012-06-13 17:32:04 Tschallacka

我前幾天有同樣的問題。奇怪的是，它在FF中似乎沒問題，但在IE，Chrome和Safari中會閃爍。解決方案是使用一個CSS精靈表。您可以創建具有相鄰背景的圖像。您只顯示背景圖表的一部分。您可以通過調整背景上的邊距來切換它。您可以使用addClass和removeClass處理邊距調整。下面是代碼，在這裏看到了一個小提琴：http://jsfiddle.net/fMhMY/

CSS

.navButton span{ 
width:32px; 
height:32px; 
display:block; 
} 

a.leftButton span, a#leftButton span{ 
background-image:url(Prev.png); 
background-position:-64px 0px; 
} 

/*nav button sprites */ 

/*sprite order is pushed, hover, natural */ 

a.leftButton.navOver span, a.rightButton.navOver span{ 
background-position:-32px 0px; 
} 

a.leftButton.navPressed span, a.rightButton.navPressed span{ 
background-position:0px 0px; 
}

HTML

<div style='display:inline-block'> 
    <a href="javascript:void(0);" class="leftButton navButton" id='lefty'> 
     <span></span> 
    </a> 
</div>

jQuery的

$('.leftButton').mousedown(function() { 

     $('.leftButton').addClass('navPressed'); 
     console.log('mousedown'); 

}); 
$('.leftButton').mouseup(function() { 
     $('.leftButton').removeClass('navPressed'); 
     console.log('mouseup'); 
}); 

$('.leftButton').hover(function() { 
     $('.leftButton').addClass('navOver'); 
     console.log('hover'); 
}); 


$('.leftButton').mouseout(function() { 
     $('.leftButton').removeClass('navPressed').removeClass('navOver'); 
     console.log('mouseout'); 
});

來源

2013-12-20 23:29:53 chiliNUT

使用JQuery使閃爍種效果

回答

相關問題