[英]How to animate background image with jQuery
Hi I'm trying to animate a background image using jQuery, I tried following this tutorial here , however I've had no luck with my test page, I see the blue Facebook icon, but on mouse over it does not animate upwards to reveal the gray logo. 嗨,我正在尝试使用jQuery设置背景图片的动画,我在这里尝试了本教程 ,但是我的测试页运气不佳,我看到了蓝色的Facebook图标,但是当鼠标悬停在上方时,它没有向上动画以显示灰色徽标。 Please help!
请帮忙! Thanks, I'm a jQuery noob.
谢谢,我是jQuery菜鸟。
My test page: http://leongaban.com/_stack/bg_animation/ 我的测试页: http : //leongaban.com/_stack/bg_animation/
The Facebook icon should animation upwards, the full image below: Facebook图标应向上动画,如下所示:
My CSS 我的CSS
<style>
#facebook_icon li {
padding: 0;
width: 120px;
height: 119px;
list-style: none;
background: red;
background:url('img/fb_120x238.png') repeat 0 0;
}
</style>
HTML 的HTML
<ul id="facebook_icon">
<li><a href="#"><div class="box"></div></a></li>
</ul>
Javascript Java脚本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
<script>
(function() {
$('#facebook_icon li')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -119px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
})();
</script>
UPDATE: WORKING CSS 3 Solution 更新:正在使用CSS 3解决方案
CSS 3 CSS 3
#facebook_icon li {
padding: 0;
width: 120px;
height: 119px;
list-style: none;
background: red;
background:url('img/fb_120x238.png') repeat 0 0;
-moz-transition: background-position 1s;
-webkit-transition: background-position 1s;
-o-transition: background-position 1s;
transition: background-position 1s;
background-position: 0 0;
}
#facebook_icon li:hover{
background-position: 0 -119px;
}
.box {
width: 120px;
height: 119px;
}
HTML (Added empty div box to have something to click on) HTML (添加了空div框以单击某些内容)
<ul id="facebook_icon">
<li><a href="#"><div class="box"></div></a></li>
</ul>
A simple solution should be using the css3 transition. 一个简单的解决方案应该是使用css3过渡。 You can do something like this:
您可以执行以下操作:
In Your CSS 在您的CSS中
#facebook_icon li{
-moz-transition: background-position 1s;
-webkit-transition: background-position 1s;
-o-transition: background-position 1s;
transition: background-position 1s;
background-position: 0 0;
}
#facebook_icon li:hover{
background-position: 0 -119px;
}
This one is thankfully pretty simple. 幸运的是,这很简单。 You are animating
background-position
on the anchor, but the actual image is on the li. 您在锚点上设置
background-position
动画,但实际图像在li上。
Just change your selector in your JavaScript: 只需在JavaScript中更改选择器即可:
$('#facebook_icon li')
However, I'd recommend changing your markup (and accompanying CSS) so the a
is inside the li
instead of a child of the ul
. 但是,我建议更改您的标记(和随附的CSS),使
a
位于li
内部而不是ul
的子内部。 That way your markup is valid. 这样,您的标记才有效。
Update: 更新:
Hey, so I totally agree with using CSS3. 嘿,所以我完全同意使用CSS3。 Its exactly how I would implement that.
这正是我将如何实施。 But just to close out the question: To get the
bgpos
plugin working with jQuery 1.8.2, change the first two lines of the backgroundPosition
method to this: 但是,为了解决这个问题:若要使
bgpos
插件与jQuery 1.8.2一起使用,请将backgroundPosition
方法的前两行更改为:
if (fx.start === 0 && typeof fx.end == 'string') {
var start = $.css(fx.elem,'backgroundPosition');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.