需要簡單的jquery淡入/淡出轉換幫助

使用jquery，我試圖讓一個背景圖像在您將鼠標移到另一個上時淡入其中，當您將鼠標移開時淡入淡出。在過去的幾個小時裏，我嘗試過無數的解決方案，似乎無法找到適用的解決方案。下面是我的CSS需要簡單的jquery淡入/淡出轉換幫助

.thumbnail span { 
    background: url('images/portfolio.png') no-repeat; 
    width: 298px; 
    height: 160px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin-left:-2px; 
    cursor: pointer; 
} 

.thumbnail span .rollover { 
    background: url('images/portfolio_vignette.png') no-repeat; 

}

，這裏是我的JavaScript：

<script type="text/javascript">   
$(document).ready(function(){ 

    $(".rollover").css({'opacity':'0'}); 

    $('.thumbnail span').hover(
     function() { 
      $(this).find('.rollover').stop().fadeTo(500, 1); 
     }, 
     function() { 
      $(this).find('.rollover').stop().fadeTo(500, 0); 
     } 
    ) 

});  
</script>

乾杯傢伙！

來源

2011-06-14 John

Java是爲JavaScript什麼車地毯。這是JavaScript，而不是Java。 – configurator 2011-06-14 18:31:00

那麼，你把Java下的JavaScript來抓漏油？ – 2011-06-14 18:50:35

確保將div包裝放在兩個圖像周圍，並將懸停事件附加到該圖像上。如果您不這樣做，則隨着圖像消失/出現，您的懸停將持續觸發。

在這裏，我簡單地將徘徊時的最後一個元素褪色，並在非懸停時淡出。當然，您可以更具體一些，並僅對img標籤或特定標識採取行動。通用的方法更有用，因爲您不必再爲另一對圖像編寫代碼。

HTML：

<div class="hoverfade"> 
    <img src="http://my/image1.jpg"> 
    <img src="http://my/image2.jpg"> 
</div>

的jQuery：

$(".hoverfade").hover(function() { 
    $(this).children().last().fadeOut(1000); 
}, function() { 
    $(this).children().last().fadeIn(500); 
})

實施例：http://jsfiddle.net/jtbowden/wQkWR/1/

來源

2011-06-14 18:31:30

用fadeToggle替換fadeOut/fadeIn .. – technopeasant 2011-06-16 00:53:25

將您的2張圖片完全放在同一位置，然後用javascript讓頂部圖像淡出。這將使你想要的效果

來源

2011-06-14 18:05:41 eveevans

您可以使用圖像標記（img）而不是背景CSS。在你想使用背景CSS的情況下，使用2 div覆蓋 – eveevans 2011-06-14 18:08:43

你可以訪問縮略圖類來執行淡入或淡出。

$（。thumbnail）.fadeIn（'slow'）;

或

$（。thumbnail）.fadeIn（700）; //毫秒

到淡出做反向

$ .fadeOut（ '快'）（縮略圖）;

或

$ .fadeOut（300）（縮略圖）; //毫秒

來源

2011-06-14 18:06:53 james31rock

簡化傑夫B的代碼..

：使用具有背景圖像的div http://jsfiddle.net/jtbowden/wQkWR/

實施例

使用jQuery的fadeToggle避免單獨功能的淡出和。

http://jsfiddle.net/danielredwood/wQkWR/2/

來源

2011-06-14 19:51:39 technopeasant

需要簡單的jquery淡入/淡出轉換幫助

回答

相關問題