Jquery 在后台位置上动画不起作用
Jquery animate on background position not working
谁能告诉我为什么这个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 或鼠标输出上没有做任何事情。我在这里错过了什么?
$(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)
});
你不能对背景位置进行动画处理,你可以做这样的事情:
$('li.menu a').css({
opacity: 0.5,
marginLeft: "-5px"
});
$('li.menu a').mouseover(function() {
$(this).stop().animate({
marginLeft: "0px",
opacity: 1
}, 500)
}).mouseout(function() {
$(this).stop().animate({
marginLeft: "-5px",
opacity: 0.5
}, 500)
});
只是一个演示
看起来没有插件就无法做到这一点。
试试这个,
$('li.menu a').css({background-position-x:"-416px",background-position-y:"0"});
$('li.menu a').mouseover(function(){
$(this).stop().animate({background-position-x:"0",background-position-y:"0"}, 500)
})
.mouseout(function(){
$(this).stop().animate({background-position-x:"-416px",background-position-y:"0"}, 500)
});
相关文章:
- firefox中的CSS动画不起作用
- jQuery切换方法的动画不起作用
- 传单.markrcluster:动画不起作用
- Iframe加载动画不起作用
- HTML5-逐帧动画不起作用
- Javascript动画不起作用
- 展开 CSS3 动画不起作用
- 三.js导入科拉达动画不起作用
- JavaScript动画不起作用
- 角度 1.3 CSS 动画不起作用
- Jquery 在后台位置上动画不起作用
- 向下滚动时动画不起作用
- JQuery 同步动画不起作用
- 为什么这个滚动动画不起作用
- 滑入下一张柔性滑块幻灯片后,css 动画不起作用
- 删除 css 动画不起作用
- 引导动画不起作用
- 画布中的动画不起作用
- ngngShow上的动画不起作用
- 淡入淡出css动画不起作用