Question

我正在尝试做一个非常简单的鼠标悬停，它可以激活背景位置的变化。

JS

$('li.services_w')
    .css({
        backgroundPosition: "0px 0px"
    })
    .mouseover(function () {
        $(this).stop().animate({
            backgroundPosition: "(0px -35px)"
        }, {
            duration: 500
        })
    })
    .mouseout(function () {
        $(this).stop().animate({
            backgroundPosition: "(0px 0px)"
        }, {
            duration: 200,
            complete: function () {
                $(this).css({
                    backgroundPosition: "0px 0px"
                })
            }
        })
    });

除非每次运行此代码，否则后台始终返回background-position: 0 50%作为鼠标悬停的结果。无论我改变那些数字！我向你保证这是我使用的唯一的javascript。

CSS

.services_w {
  height: 35px;
  overflow:hidden;
  background: url("../img/services_w.jpg") repeat 0px 0px;
}
.services_w:hover {
  background-position: 0px -35px;
}

HTML

<div class="grid_10 nav">
  <ul class="lavaLamp">
    <li class="current"><a href="index.html">home</a></li>
    <li class="services_w"><a href="services.html">services</a></li>
    ...

Answer 1

删除无效CSS的额外"(....)"，如下所示：

$('li.services_w')
    .css( {backgroundPosition: "0px 0px"} )
    .mouseover(function(){
        $(this).stop().animate({backgroundPosition:"0px -35px"}, {duration:500})
    })
    .mouseout(function(){
        $(this).stop().animate({backgroundPosition:"0px 0px"}, {duration:200, complete:function(){
            $(this).css({backgroundPosition: "0px 0px"})
        }})
    });

或使用.hover()更清洁并直接指定持续时间：

$('li.services_w').css( {backgroundPosition: "0px 0px"} )
    .hover(function(){
        $(this).stop(true, true).animate({backgroundPosition:"0px -35px"}, 500);
    }, function(){
        $(this).stop(true, true).animate({backgroundPosition:"0px 0px"}, 200);
    });

动画backgroundPostion总是返回50％？

1 个答案: