無盡的褪色循環與jQuery圖像翻轉效果

我的意圖是用良好的褪色效果替換圖像：我有一個圖像A作爲背景。鼠標懸停時，圖像B淡入。鼠標移出，圖像B fadeOut，我們可以再次看到圖像A. 我使用這個代碼：無盡的褪色循環與jQuery圖像翻轉效果

<script type='text/javascript'> 
    $(function() { 
      $("img.fade") 
       .mouseover(function() { 
       $(this).fadeOut(2000);       
       }) 
       .mouseout(function() { 
       $(this).fadeIn(2000);         
       }); 
    });  
</script>

但問題是，當用戶停留在懸停，它不斷地循環（淡入，淡出，淡入，淡出..）。我希望當淡出完成它持有。當用戶鼠標移出時，就在那時我希望新的淡入淡出會發生。謝謝！

p.s 這是使用2個圖像的工作代碼。這是不同的解決方案，我的問題解決後，我adsd這個。

<script type='text/javascript'> 
$(function() { 

    $('img.fade').hover(function() { 
    var src = $(this).attr("src").match(/[^\.]+/) + "_over.jpg"; 
    $(this) 
     .animate({opacity:0},0) 
     .attr('src',src) 
     .stop() 
     .animate({opacity:1},1000); 
    }, function() { 
    var src = $(this).attr("src").replace("_over", ""); 
    $(this) 
     .animate({opacity:0},0) 
     .attr('src',src) 
     .stop() 
     .animate({opacity:1},500); 
    }); 
}); 
</script>

來源

2010-09-15 eran

'.stop（）'http://api.jquery.com/stop/是一個很好的解決問題的烏爾這 – 2010-09-15 16:18:40

試試這個代碼：

$(function() { 
     $("img.fade") 
      .mouseover(function() { 
      $(this).fadeTo('2000', 0);       
      }) 
      .mouseout(function() { 
      $(this).fadeTo(2000, 1);         
      }); 
});

的問題是，淡出（）函數設置你的元素無法比擬的顯示屬性，所以DOM認爲您的鼠標不再與互動元素，並調用fadeIn（）函數。它連續循環。 fadeTo函數改變不透明度，但它實際上並不會使圖像變成一種方式。它需要兩個參數，持續時間和不透明度。

來源

2010-09-15 15:36:38 Adam

真實做的工作，謝謝！ – eran 2010-09-15 17:23:53

對我來說，圖像一旦淡出就會消失，這會觸發mouseout功能。嘗試將動畫設置爲.01不透明度。

來源

2010-09-15 15:38:46

你說得對，最後我用了fadeTo。謝謝 – eran 2010-09-15 17:27:19

$(function() { 
    var img = ['imageA.jpg','imageB.jpg'] 
    $('img.fade').hover(function() { 
    $(this) 
     .animate({opacity:0},0) 
     .attr('src',img[1]) 
     .stop() 
     .animate({opacity:1},1000); 
    }, function() { 
    $(this) 
     .animate({opacity:0},0) 
     .attr('src',img[0]) 
     .stop() 
     .animate({opacity:1},1000); 
    }); 
});

，您可以嘗試here

參考：.hover()，.stop()

來源

2010-09-15 16:11:57

在最後我用fadeTo和背景圖片，但你的解決方案也很好，工作。我改變你的代碼，允許使用頁面中的所有圖片 - 查看我上面編輯的問題。 – eran 2010-09-15 17:46:05

如果你不想動態切換圖像和真的希望繼續使用背景圖片，你可以利用事件bubblin摹...

HTML：

<div class="myClass" style="background: url(imageA.jpg);"> 
    <img src="imageB.jpg" /> 
</div>

jQuery的：

$('.myClass').hover(function(){ 
    $(this).find('img').fadeOut(2000); 
}, function(){ 
    $(this).find('img').fadeIn(2000); 
})

未經測試，以便讓我們知道，如果它工作或沒有。

來源

2010-09-15 16:23:51 Sam

對於其他人也

Google+(Ignorance||rum) = me.

的mouseenter +鼠標離開這裏領導可能與你認爲可能例如工作奇數半循環行爲幫助

var someElements = $('div.event-cell'); 

      someElements.mouseenter(function() { 
       var targets= calEvents.not(this); 
       targets.fadeTo(1000, 0.3); 
      }).mouseleave(function() { 
       var targets = someElements.not(this); 
       targets.fadeTo(1000, 1); 
      });

似乎mouseover和mouseout比你想象的更具包容性， mouseout包含子元素。

I think = layman's opinion after rum :)

觀看演示部分http://api.jquery.com/mouseover/

來源

2011-10-30 07:38:43 MemeDeveloper

無盡的褪色循環與jQuery圖像翻轉效果

回答

相關問題