jquery - 替换鼠标悬停时的图像，同时将其向左移动

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。

只需使用负边距和过渡。

.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/