gpt4 book ai didi

javascript - 背景位置上的 Jquery 动画不起作用

转载 作者:行者123 更新时间:2023-11-30 18:25:48 26 4
gpt4 key购买 nike

谁能告诉我为什么这个 jquery 不工作?

我有一个这样的列表:

      <div id="services">
<h1>Services</h1>
<ul>
<li class="menu"><a href="#">menu item1</a></li>
<li class="menu"><a href="#">menu item2</a></li>
<li class="menu"><a href="#">menu item3</a></li>
<li class="menu"><a href="#">menu item4</a></li>
</ul>
</div>

我想在鼠标悬停时从左侧滑入背景图像,并在鼠标移开时将其反转。

以下 jquery 代码在 moueover 或 mouseout 上没有做任何事情。我在这里缺少什么?

$(function(){       
$('li.menu a').css( {backgroundPosition: "-416px 0"})
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0px 0px)"}, 500)
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-416px 0)"}, 500)
});
});

最佳答案

你运气好:)我昨天遇到了同样的问题。我看你和我一样,只需要 X 轴上的动画。

所以您需要做的就是将单个参数传递给 backgroundPosition,这是 X 轴的默认值。还传递 int,这是像素的默认值。

$('li.menu a').css({
backgroundPosition: -416
}).mouseover(function(){
$(this).stop().animate({backgroundPosition: 0}, 500)
}).mouseout(function(){
$(this).stop().animate({backgroundPosition: -416}, 500)
});

关于javascript - 背景位置上的 Jquery 动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10896652/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com