幫助將漸變應用於使用Jquery進行背景位置更改

我對Jquery很新，但最終解決了如何在懸停在單獨的「觸發器」圖像上時更改我的#contentContainer的背景圖像（精靈）。然而，在我的生活中，我無法弄清楚如何在轉換中應用淡入淡出效果。基本上，而不是當前突然的背景圖像轉換，我希望它在鼠標懸停和鼠標懸停時順利淡入。幫助將漸變應用於使用Jquery進行背景位置更改

這裏是我的（非褪色，但工作）腳本：

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 
$j("#swapTrigger").hover(
function() { 
$j("#contentContainer").css("background-position", "0px 1401px");  
}, 
function() { 
$j("#contentContainer").css("background-position", "0px 0px"); 
}); 
});

非常非常感謝您的幫助！

來源

2010-08-03 Ergonomical

使用http://api.jquery.com/animate

$j("#contentContainer").animate({"background-position": "0px 1401px"}, "slow");

來源

2010-08-03 14:30:11

謝謝您的回覆斯特凡 - 不幸的是，我一直無法讓它工作（就像Pat的建議一樣）。似乎很奇怪 - 不知道爲什麼......我能想到的唯一一件事（對JavaScript的知識非常有限）是可能的，因爲我的懸停觸發器元素與要更改的元素（contentContainer）是分離的，腳本語法應該與示例中的示例略有不同？這也許可以解釋爲什麼我的非衰落腳本工作，但兩個衰落的版本都沒有？再次感謝！ – Ergonomical 2010-08-03 17:58:56

你可以編輯你的最新版本嗎？也許我可以看到一些東西。 – 2010-08-03 18:09:39

您可以動畫的背景位置屬性，它會給你2個圖像之間的平滑過渡嘗試：

$j("#swapTrigger").css({backgroundPosition: "0 0"}); 
$j("#swapTrigger").hover(
    function() { 
     $j("#contentContainer").animate({backgroundPosition: "0 1401px"});  
    }, 
    function() { 
     $j("#contentContainer").animate({backgroundPosition: "0 0"}); 
    } 
);

如果你的問題是關於淡出透明度當他們在2之間切換時，圖像不能用單個元素來完成。你需要你的背景圖像添加到嵌套的元素，然後褪色並排出：

<div id="contentContainer"> 
    Some content 
    <div class="bg1"></div> 
    <div class="bg2"></div> 
</div>

懸停，淡化他們，並根據需要進行：

var bg1 = $('.bg1'); 
var bg2 = $('.bg2'); 
$j("#swapTrigger").hover(
    function() { 
     if(bg1.is(':hidden')){ 
      bg1.stop().fadeIn(); 
      bg2.stop().fadeOut(); 
     } else { 
      bg2.stop().fadeIn(); 
      bg1.stop().fadeOut(); 
     } 
    } 
);

來源

2010-08-03 14:38:06 Pat

感謝您的回覆。不幸的是，您的第一個解決方案，聽起來像理想的解決方案不適合我 - 不知道爲什麼（已經嘗試了幾次）。可以嘗試你的第二種方法，儘管不希望添加到我的標記中（因爲它在mo中的所有瀏覽器中都可以正常工作）。再次感謝！ – Ergonomical 2010-08-03 17:52:18

我完全理解不想添加更多標記。看看我的編輯，看看他們是否會幫助你。我在動畫之前添加了一組明確的背景位置。出於好奇，當你將'＃swapTrigger'元素作爲鼠標移動時，你的背景位置是否有動畫？ – Pat 2010-08-03 18:37:13

幫助將漸變應用於使用Jquery進行背景位置更改

回答

相關問題