1

嗨，我正在尝试使用 jQuery 为背景图像设置动画，我尝试在此处遵循本教程，但是我的测试页面没有运气，我看到蓝色的 Facebook 图标，但是在鼠标悬停时它不会向上显示动画灰色标志。请帮忙！谢谢，我是 jQuery 菜鸟。

我的测试页面： http: //leongaban.com/_stack/bg_animation/

Facebook 图标应该向上动画，完整图像如下：

在此处输入图像描述

我的 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

<ul id="facebook_icon">
    <li><a href="#"><div class="box"></div></a></li>
</ul>

Javascript

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

更新：工作 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（添加了空的 div 框以供点击）

<ul id="facebook_icon">
    <li><a href="#"><div class="box"></div></a></li>
</ul>
4

2 回答 2

5

一个简单的解决方案应该是使用 css3 过渡。你可以这样做：

在你的 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;
}
于 2012-11-28T15:30:03.093 回答
3

谢天谢地，这个非常简单。您background-position在锚点上制作动画，但实际图像在 li 上。

只需在 JavaScript 中更改选择器：

 $('#facebook_icon li')

但是，我建议您更改您的标记（以及随附的 CSS），以便在a内部li而不是ul. 这样你的标记是有效的。

更新：

嘿，所以我完全同意使用 CSS3。这正是我将如何实现的。但只是为了结束这个问题：要让bgpos插件与 jQuery 1.8.2 一起工作，请将backgroundPosition方法的前两行更改为：

 if (fx.start === 0 && typeof fx.end == 'string') {
    var start = $.css(fx.elem,'backgroundPosition');
于 2012-11-28T15:27:35.860 回答