在mousehover上替換圖像並同時將其移動到左邊

我的頁面中有圖像。我想要做的是當任何一個人在圖像上盤旋時，我想慢慢將圖像緩慢移動到其左側，同時用另一個圖像替換圖像。在鼠標移出時，我想將之前的圖像恢復到之前的位置。在mousehover上替換圖像並同時將其移動到左邊

我試着用下面的代碼在那裏我使用:hover，但它的替換速度非常快，並沒有將圖像移動到左側。

請檢查demo

你能告訴如何實現這一目標使用jQuery或CSS？

<div class="fb-button"><a target="_blank" href="#"></a></div>

CSS

.fb-button a{ 
background-image:url(http://i33.tinypic.com/20svqkh.png); 
} 

.fb-button a:hover{ 

background-image:url(http://i36.tinypic.com/n2b978.png); // replacement 
} 

.fb-button a, .twt-button a, .in-button a, .youtube-button a { 
width: 34px; 
height: 33px; 
} 


.fb-button a, .twt-button a, .in-button a, .youtube-button a { 
display: block; 
}

來源

2013-04-23 black_belt

您不需要此Javascript的Javascript。

只需使用負邊距和過渡。

.fb-button a{ 
    background-image:url(http://i33.tinypic.com/20svqkh.png); 
    /*transition*/ 
    -webkit-transition:margin 1s, background-image 1s; 
     -moz-transition:margin 1s, background-image 1s; 
     -o-transition:margin 1s, background-image 1s; 
      transition:margin 1s, background-image 1s; 
} 
.fb-button a:hover{ 
    background-image:url(http://i36.tinypic.com/n2b978.png); 
    margin-left:-0.5em; 
}

http://jsfiddle.net/chPrK/6/

來源

2013-04-23 20:37:32

如果您不在意支持IE9或以前版本，這可能會起作用。 – jfriend00 2013-04-23 20:40:11

感謝您的回答。這正是我想要創造的。 :) – 2013-04-23 20:50:06

你不能淡出一個背景和另一個背景都具有相同的物體褪色。我建議使用單獨的對象是這樣的：

<div class="fb-button"> 
    <a target="_blank" href="https://www.facebook.com/bkashlimited"> 
     <div class="fader1 fader"></div> 
     <div class="fader2 fader"></div> 
    </a> 
</div>

而且，這個jQuery：

$(".fb-button").hover(function() { 
    $(this).find(".fader1").fadeOut(); 
    $(this).find(".fader2").fadeIn(); 
}, function() { 
    $(this).find(".fader2").fadeOut(); 
    $(this).find(".fader1").fadeIn(); 
});

而且，這個CSS：

.fb-button { 
    position: relative; 
} 

.fader { 
    width: 34px; 
    height: 33px; 
    position: absolute; 
} 

.fb-button .fader1 { 
    background-image:url(http://i33.tinypic.com/20svqkh.png); 
} 

.fb-button .fader2 { 
    background-image:url(http://i36.tinypic.com/n2b978.png); 
    display: none; 
}

來源

2013-04-23 20:30:28 jfriend00

感謝您的答覆。其實我試圖按照這個網站的社交插件。 http://www.bkash.com/（在右側）。你認爲他們正在使用你發佈的方法嗎？謝謝 – 2013-04-23 20:33:32

@black_belt - 如果你想這樣做的確切方式，該網站做到這一點，爲什麼你沒有把你的問題呢？我已經做到了這一點，並符合你書寫的問題的標準 - 是否有一個你不想這樣做的理由？我不知道bkash.com是如何做的，因爲有很多不同的方法可以解決這個問題。 – jfriend00 2013-04-23 20:36:43

試試這個：

.fb-button a{ 
    background-image:url(http://i33.tinypic.com/20svqkh.png); 
    -webkit-transition: all 1s ease-in-out; 
    left: 100px; 
    position: relative; 
} 

.fb-button a:hover{ 
    position: relative; 
    left: 50px; 
    background-image:url(http://i36.tinypic.com/n2b978.png); 
}

這裏的警告是transition屬性仍然是實驗性的，因此它是供應商特定的前綴。

不同的瀏覽器使用不同的前綴。例如：

Opera使用：-o-transition
Firefox使用：-moz-transition
谷歌瀏覽器上面顯示的一個：-webkit-transition

這些實施常規的新功能，但現在不符合標準，儘管它們很快就不是保證將來。

來源

2013-04-23 20:34:59

IE9或之前呢？ – jfriend00 2013-04-23 20:41:33

......並且另外保證不會在過去很遠的地方得到支持。 – 2013-04-23 20:58:32

我不知道你在向左移動的意思到底是什麼，但你可以做到這一點，持續時間較長，通過使用過渡期產權交換圖像時。在下面的演示中，我將其設置爲2秒。在懸停我設置一個右頁邊距移動圖像：

.fb-button a{ 
background-image:url(http://i33.tinypic.com/20svqkh.png); 
    -webkit-transition-duration: 2s; 
    -moz-transition-duration: 2s; 
    -o-transition-duration: 2s; 
    transition-duration: 2s; 
} 

.fb-button a:hover{ 

    background-image:url(http://i36.tinypic.com/n2b978.png); 
    margin-right: 3px; 
}

http://jsfiddle.net/chPrK/5/

來源

2013-04-23 20:37:33

它會立即做到這一點。由於這是一種視覺效果，我不確定這很重要。它仍然是功能性的。如果您必須在舊瀏覽器中進行轉換，則可以使用https://github.com/louisremi/jquery.transition.js等polyfill。只需使用Modernizr之類的東西檢測支持。 – 2013-04-23 20:43:28

@dstorey謝謝你的回答 – 2013-04-23 20:50:30

在mousehover上替換圖像並同時將其移動到左邊

回答

相關問題