jquery翻轉鼠標褪色圖像

我有jquery腳本，當有人翻轉圖像上的鼠標時，替換圖像。jquery翻轉鼠標褪色圖像

我希望它隨着衰落而改變。

我需要做什麼？

謝謝！

<img src='images/dogySitter_s.png' alt='' id='first' /> 



<script type='text/javascript'> 
$(document).ready(function(){ 
    $("#first").hover(
     function() {$(this).attr("src","images/dogySitter_c.png");}, 
     function() {$(this).attr("src","images/dogySitter_s.png"); 
    }); 
}); 
</script>

來源

2013-08-23 Roi

使用'淡入（）'＆找到'淡出（）' – raam86

這將淡入淡出的元素，交換圖像和褪色元素早在（動畫不透明度將避免鼠標離開的問題被觸發，當元素淡出）：

$(document).ready(function(){ 
    $("#first").on({ 
     mouseenter: function() { 
      $(this).animate({opacity: 0}, 400, function() { 
       $(this).attr('src', 'images/dogySitter_c.png') 
         .animate({opacity: 1}, 400); 
      }); 
     }, 
     mouseleave: function() { 
      $(this).animate({opacity: 0}, 400, function() { 
       $(this).attr('src', 'images/dogySitter_s.png') 
         .animate({opacity: 1}, 400); 
      }); 
     } 
    }); 
});

對於交叉褪色你需要兩個元素

來源

2013-08-23 22:37:47 adeneo

不好。它淡出第一張圖片而沒有顯示第二張... – Roi

上面的小提琴：http://jsfiddle.net/JNj7N/1/ – MackieeE

@Roi - 這就是爲什麼它說「交叉褪色你需要兩個元素」，如何你是否期望用一個元素同時顯示兩個圖像，只是將這個圖像從源頭中分出來？ – adeneo

adeneo的答案提供了fadeIn函數作爲fadeOut函數的回調函數。如果你想讓圖像淡出然後讓另一個淡入，這將工作得很好。

如果你想在同一時間發生衰落，你可能不得不使用一些css技巧來放置隱藏的圖像在非隱藏的圖像上，然後調用fadeIn和fadeOut。所有的jQuery動畫都是異步執行的，所以它們將同時發生。

更多信息可以在這裏淡出http://api.jquery.com/fadeOut/

來源

2013-08-23 22:40:35 benashby

jquery翻轉鼠標褪色圖像

回答

相關問題