jquery - 在 CSS 中淡出到另一个 Sprite 表位置的最简单方法

Question

目前我正在一个网站上工作，该网站在单独的 Sprite 表上有多个图像(如 this link (imgur) 中的两个)。我正在尝试将较暗的图像淡化为较亮的图像，并且我一直在使用类似的东西:

.display {
    background-image: url("../images/1.png");
    display: block;
    background-position: 0 -53px;
    width: 124px;
    height: 53px;
}
.display:hover {
    background-image: url("../images/1.png");
    display: block;
    background-position: 0 0px;
    width: 124px;
    height: 53px;
}

这行得通，但它只会使图像立即发生变化，我更喜欢悬停时出现某种“淡入”或“发光”效果。实现我想要的结果的最简单方法是什么？我想它要么是 jQuery 要么是 CSS3 中的东西，但我真的没有运气。

Answer 1

在 CSS 3 中，您可以这样做，设置 opacity 并添加 transformation，这样您只需要一张图片!看看这个:

img {
    opacity: 0.5;
    transition: opacity 0.5s;
    -moz-transition: opacity 0.5s; /* Firefox 4 */
    -webkit-transition: opacity 0.5s; /* Safari and Chrome */
    -o-transition: opacity 0.5s; /* Opera */
}
img:hover {
    opacity: 1;
    transition: opacity 0.5s;
    -moz-transition: opacity 0.5s; /* Firefox 4 */
    -webkit-transition: opacity 0.5s; /* Safari and Chrome */
    -o-transition: opacity 0.5s; /* Opera */
}​

fiddle :http://jsfiddle.net/sBeed/