如何使用jQuery在CSS中动画变化

问题描述：

如果有人会如此热情为我提供一个例子，我会非常感激。

本质上，我试图通过在css中使用jQuery操纵背景图像来动画sprite技术。我们的目标是对悬停进行动画处理，以便我可以很好地淡入淡出，而不仅仅是下面代码产生的突然切换。

这是我在哪里：

HTML：

<h1 id="solomon">Solomon</h1>

CSS：

body#default h1 { 
text-indent: -9999px; 
display: inline-block; 
height: 213px; 
} 
body#default h1#solomon { 
    background: transparent url(/images/S.gif) center top no-repeat; 
    width: 183px; 
    margin: 100px 0 0 216px; 
    }

JQUERY：

$(function() { 
$('h1').hover(function() { 
    $(this).stop().css('background-position', 'center bottom'); 
}, function() { 
    $(this).stop().css('background-position', 'center top'); 
}); 
});

眼下它工作正常，但是没有漂亮的动画版本。我想知道如何动画切换背景图片放置的效果。

感谢任何人在这个拍摄。 :)

我希望有人可以回答我的问题，而不指向我的教程？我在教程中遇到的问题是，他们都强迫我改变我在此时被锁定的HTML。

另外，为什么动画函数不能在我上面的例子（@CMS）中工作？

感谢您的帮助！ :)

答

This article将让您一开始就Two Image Technique

[更新]

找到一个更好的教程： This article将向你展示如何创建一个衰落的形象（就像一个标志，例如）

答

要创建淡入淡出效果，您需要绝对地将一个元素放在另一个元素的顶部，然后将元素的不透明度设置为向下，以显示下面的图像。

由于您无法更改HTML，我建议您使用JavaScript更改标记，方法是动态插入一个跨度，以显示H1标记的新图像。

我已经在jsbin.com上使用您的标记（即只是H1标记）放在一起的工作示例。我使用jqueryfordesigners.com教程中的图像（因为它是我的），以便您可以了解所需的CSS更改。

具体来说，你需要的款式嵌套SPAN在H1要绝对定位的H1内，使它淡入：

http://jsbin.com/adike/（编辑：http://jsbin.com/adike/edit/）

答

你必须使用this插件动画背景位置:)

如何使用jQuery在CSS中动画变化

相关推荐