在mousehover上替换图像并同时将其移动到左边

Question

我的页面中有图像。我想要做的是当任何一个人在图像上盘旋时，我想慢慢将图像缓慢移动到其左侧，同时用另一个图像替换图像。在鼠标移出时，我想将之前的图像恢复到之前的位置。

我试着用下面的代码在那里我使用: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; 
} 

Answer 1

您不需要此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/

Answer 2

你不能淡出一个背景和另一个背景都具有相同的物体褪色。我建议使用单独的对象是这样的：

<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; 
} 

Answer 3

试试这个：

.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

这些实施常规的新功能，但现在不符合标准，尽管它们很快就不是保证将来。

Answer 4

我不知道你在向左移动的意思到底是什么，但你可以做到这一点，持续时间较长，通过使用过渡期产权交换图像时。在下面的演示中，我将其设置为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/