jquery switchClass transition - background-image

我遇到了switchClass方法的一些問題。我想添加/刪除一個css類（newsHover）當鼠標懸停類newsArea與一些過渡。jquery switchClass transition - background-image

我有以下代碼

$('.newsArea').mouseover(function(){ 
     $(this).switchClass('','newsHover',500, 'linear'); 
}).mouseleave(function(){ 
     $(this).switchClass('newsHover','',500); 
});

我認爲方法是正確的，因爲你可以看到： http://docs.jquery.com/UI/Effects/ClassTransitions和 http://jqueryui.com/docs/switchClass/

的newsHover類有一個背景圖像：

.newsHover{   
     background-image: url("../../images/newsArea-hover.png"); 
     background-repeat: no-repeat; 
     background-position:left top; 
     width: 200px; height: 52px;    
     }

圖像顯示，但沒有任何轉換。它在500毫秒後出現。

我可以接受css3跨瀏覽器的任何解決方案。

這裏的任何提示？

感謝

編輯

我忘了告訴我使用了1.7.2版本的jQuery; jquery.easing.1.3，以及（與選定的所有組分）

來源

2012-08-31 peterK

http://stackoverflow.com/questions/7925994/jquery-ui-switchclass-method-is-not工作正常 –

謝謝。但addClass（）和removeClass方法我不能有任何轉換，對嗎？或者我忘記了什麼？ – peterK

-1

的jquery-UI-1.8.23.custom.min具有初始類在適當位置以切換 -

$('.newsArea').mouseover(function(){ 
     $(this).switchClass('oldClass','newsHover', 500); 
}).mouseleave(function(){ 
     $(this).switchClass('newsHover','oldClass',500); 
});

也許的圖像在應用後需要花費時間加載？

所以，你可以嘗試..

.oldClass{ 
    background-image: url("../../images/newsArea-hover.png"); 
    background-size:0px; 
} 
.newsHover{   
    background-size: auto;  
}

來源

2012-08-31 17:28:50

第一個代碼塊不起作用。如果你可以分析我給你的第二個鏈接的源代碼，你可以看到類似的東西。關於第二個模塊，我沒有嘗試，但我想它會改變我的.newsArea類中的文本的不透明度。所以這不是一個解決方案。謝謝 – peterK

@ user794035：我懷疑是這樣。由於另一個原因，我刪除了'opacity'位，因爲我認爲這可能會導致您的映像需要加載時間？ –

無論如何，謝謝。與此同時，如果您有任何其他想法，請隨時分享。 – peterK

只是爲了您的信息，你的描述是完全一樣的預期行爲。 switchClass函數只是改變它在'過渡'結束時無法生成動畫的屬性。 switchClass不支持動畫背景圖像。

並非所有樣式都可以是動畫。例如，無法爲背景圖像設置動畫效果。任何不能動畫的樣式將在動畫結束時更改爲。

從[http://api.jqueryui.com/switchClass/][1]

來源

2012-10-16 13:22:42 codinghands

jquery switchClass transition - background-image

回答

相關問題