添加平滑淡入淡出/轉換到jQuery懸停功能

我有一個功能懸停替換，插入懸停的背景圖像，並在鼠標移除它。添加平滑淡入淡出/轉換到jQuery懸停功能

<script type='text/javascript'> 
$(document).ready(function(){ 
    $("#l-1").hover(function() { 
     $("#r-box").css("background","url('<?php bloginfo('template_directory'); ?>/images/up.png') no-repeat transparent"); 
      }, function() { 
     $("#r-box").css("background","#3DA7BC"); 
    }); 
}); 
</script>

但我試圖讓過渡平滑和優雅，不只是進/出。我嘗試了各種.animate函數來使它無效。

感謝您的幫助！

來源

2011-03-01 tigre

您可能無法爲此類項目設置動畫背景。從jQuery的動畫頁面：

所有的動畫性能應動畫到一個數值，除了下面提到;大多數屬性是非數字的不能使用基本jQuery 功能動畫。（例如，寬度，高度，或左側可以爲動畫，但不能爲背景色。）除非另有說明，否則屬性值將被視爲像素的數量。可以指定單位em和％，其中適用。

我推薦做的是使用其他方式顯示背景圖像中的內容。也許把它放在一個隱藏的span標籤中，並通過執行fadeIn或fadeOut對其進行動畫處理。

來源

2011-03-01 00:27:11 PriorityMark

它不會是很難解決，隨着[cssHooks（http://api.jquery.com/jQuery.cssHooks/），但你會動畫？ CSS中沒有背景圖片透明度;一些瀏覽器支持簡單的背景顏色，但這對此無濟於事。 – Tgr 2011-03-01 00:38:59

我一直在想的一種方法是將div從up狀態變爲over狀態，但是在如何實現這種轉換方面卻陷入了困境。 – tigre 2011-03-01 00:44:42

也許如果你把一個更完整的代碼放在一起，你可能會提供更多的見解/想法？ – PriorityMark 2011-03-01 16:56:04

您可以嘗試使用jQuery爲有問題的對象設置動畫效果。

我的算法是這樣的：

1）不透明度動畫爲某個值，這使得它更透明
2）在回調部，使用css({key:value})
3改變背景圖像）動畫不透明度回到原來的值

$('.your-base-object').hover(function(){ 
     $(this).animate({opacity: '0.9'}, 300, function(){ 
      $(this).css({ 
       background: "url('path/to/your-image')" 
      }); 
      $(this).animate({ 
       opacity: "1.0" 
      }, 300); 
     }) 
    }, function(){ 
     $(this).animate({opacity: '0.9'}, 300, function(){ 
      $(this).css({ 
       background: "url('path/to/your-image')" 
      }); 
      $(this).animate({ 
       opacity: "1.0" 
      }, 300); 
     }) 
    });

來源

2012-07-12 13:59:10 Ankur

添加平滑淡入淡出/轉換到jQuery懸停功能

回答

相關問題