为什么js调用css脚本后没效果

最新推荐文章于 2021-08-04 01:15:12 发布

tangxu5713

最新推荐文章于 2021-08-04 01:15:12 发布

阅读量561

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/tangxu5713/article/details/53988725

本文介绍如何使用CSS和JavaScript实现导航栏背景图片的平滑切换效果。作者遇到了一个问题：当鼠标悬停在导航链接上时，背景图片不是缓慢滚动而是立即改变。文章详细探讨了解决这一问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个是css的脚本代码：

body,ul,li{margin: 0; padding: 0; border: 0;}
body {background: #f5f0e0;}
ul#nav {width: 700px; margin: 0 auto; text-align: center;}
ul#nav li {  float:right;
             list-style: none;
          }
ul#nav li a {
   display: block;
   width: 97px;
   height: 77px;
   padding: 72px 0 0 0;
   margin: 0 32px 0 32px;
   font: bold 16px Helvetica;
   text-transform: uppercase;
   color: #9c5959;
   background:url(images/label.png) 0 -149px no-repeat;
             }
ul#nav li a:hover {background: url(images/label.png) 0 0 no-repeat;color: #eee9d9;}
ul#nav li a.js:hover {background: url(images/label.png) 0 -149px no-repeat;}

这个是js的脚本代码：

$(document).ready(function() {
        $("ul#nav li a").hover(
        function (){$(this).animate({backgroundPosition:"(0 0)"}, 300);}, /*设置图片上啦时间*/
        function (){$(this).animate({backgroundPosition:"(0 -149px)"}, 300);}/*设置图片下啦时间*/
);});

这样子应该有效果的啊怎么点击时候图片是直接就下来了而不是慢慢的滚动下来？