jQuery懸停與背景圖像過渡/緩解效應

我想知道，並已遍及搜索，找不到答案。現在，我正在使用jQuery在懸停時更改背景圖片。是否有可能在其中添加轉換時間？像褪色？ ie8兼容？jQuery懸停與背景圖像過渡/緩解效應

下面的代碼：

$('.logo').hover(function() { 
    $(this).css("background","url('url') no-repeat"); 
},function() { 
    $(this).css("background","url('url_hover') no-repeat"); 
});

來源

2014-09-05 coldpumpkin

您是否嘗試過使用[CSS過渡性質（ HTTP：// www.w3schools.com/css/css3_transitions.asp）？這似乎是可以在純CSS中完成的工作 – Stryner 2014-09-05 21:36:54

僅當使用標記時，使用背景圖像時不起作用。無論哪種方式，我已經看到了一些解決方案，但我希望它能夠在IE8上工作，所以CSS3是無關緊要的。 – coldpumpkin 2014-09-05 21:40:11

http://api.jquery.com/animate/享受！ – SpYk3HH 2014-09-05 21:54:15

由於背景圖像源不是漸變的特性，也許是爲了定位的所有元素後的兩個模擬背景和淡出一出來懸停，揭示其背後的一個。

你可以做這樣的事情 - jsFiddle Demo

HTML

<div class="bgFadeToggle"> 
    <h1>Hello World</h1> 
    <div class="bg"><img src="image-1.jpg" /></div> 
    <div class="bg"><img src="image-2.jpg" /></div> 
</div>

$('.bgFadeToggle').hover(function(){ 
    $(this).find('.bg:first').stop(true).fadeToggle(); 
});

CSS

.bgFadeToggle { 
    position: relative; 
    z-index: 9999; 
} 

.bgFadeToggle .bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

.bgFadeToggle .bg { 
    z-index: -9998; 
} 

.bgFadeToggle .bg + .bg { 
    z-index: -9999; 
}

來源

2014-09-05 22:18:01

工作正常:)謝謝！ – coldpumpkin 2014-09-05 23:19:37

不客氣:) – 2014-09-05 23:20:40

正在考慮編輯只有一個模擬'.bg'並使用'＃元素'的bg作爲默認值。思考？ – 2014-09-05 23:22:42

jQuery懸停與背景圖像過渡/緩解效應

回答

相關問題