Javascript 如何将动画应用于列表中的项目_Javascript_Jquery_Html_Css_Animation

Javascript 如何将动画应用于列表中的项目

javascript jquery html css animation

Javascript 如何将动画应用于列表中的项目,javascript,jquery,html,css,animation,Javascript,Jquery,Html,Css,Animation,我不熟悉HTML、CSS和JS/jQuery。我正在创建一个测试网站，只是为了熟悉jQuery，但似乎无法解决问题我在页面顶部有一个导航栏，左侧有一个徽标，右侧有链接。我已经设置了以下jQuery代码，以便在鼠标进入/离开时淡入淡出链接： $(document).ready(main); function main() { $('.marquee').marquee({ /* pauseOnHover: true */ }) $('.nameorlogo, .navit

我不熟悉HTML、CSS和JS/jQuery。我正在创建一个测试网站，只是为了熟悉jQuery，但似乎无法解决问题

我在页面顶部有一个导航栏，左侧有一个徽标，右侧有链接。我已经设置了以下jQuery代码，以便在鼠标进入/离开时淡入淡出链接：

$(document).ready(main);

function main() {
  $('.marquee').marquee({
    /* pauseOnHover: true */
  })

  $('.nameorlogo, .navitems').mouseenter(function() {
    $('.nameorlogo').fadeTo('fast', 1);
    $('.navitems').fadeTo('fast', 1);
  })

  $('.nameorlogo, .navitems').mouseleave(function() {
    $('.nameorlogo').fadeTo('fast', 0.5);
    $('.navitems').fadeTo('fast', 0.5);
  })
};

以下是html：

<!DOCTYPE html>
<html>
<head>
    <title>JSTest1</title>
    <link href="../css/style.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src='../js/jquery-3.2.0.js'></script>
    <script type="text/javascript" src='../js/main.js'></script>
    <script type="text/javascript" src='../js/marquee.js'></script>
</head>
<body>
    <header class=topheader>
        <nav class=navtop>
            <div class=nameorlogo>
                <h1><a href="index.html">JSTest1</a></h1>
            </div>
            <div>
                <ul class=navitems>
                    <li><a href="index.html">Contact</a></li>
                    <li><a href="index.html">Services</a></li>
                    <li><a href="index.html">About</a></li>
                    <li><a href="index.html">Home</a></li>
                </ul>
            </div>
        </nav>
    </header>
    <main>
        <div class=marquee>This is a test for JavaScript</div>
    </main>
</body>
</html>


JSTest1






这是对JavaScript的测试

我的问题是，当我把鼠标悬停在一个链接上，无论是导航链接还是徽标，所有的东西都会淡入淡出，我希望它们都是独立的

我知道你可以在CSS中这样做，这纯粹是为了帮助我学习和理解

谢谢你的帮助

Jim

使用

this

关键字，如

$（this）

来引用当前悬停的项目

另外，请注意，

.navitems

是整个UL元素，而您需要以LI元素为目标。所以

$('.nameorlogo, .navitems li').mouseenter(function()

此外，这里还有其他类似的方法来实现您的愿望：

使用

.on（）

方法

$（'.nameorlogo.navitems li'）。在({
mouseenter:function（）{
$（this.stop（）.fadeTo（250,1）；
},
mouseleave:function（）{
$（this.stop（）.fadeTo（250,0.5）；
},
});
//.stop（）用于防止动画生成

.nameorlogo，
李纳维坦斯先生{
不透明度：0.5；
}

感谢您的快速回复。我把这个加进去了。徽标现在独立工作，但导航栏仍然突出显示我在建议更改中添加的所有内容，徽标仍然正常工作，但是导航链接，当我将鼠标悬停在它们上方时，它在徽标和链接中都会褪色，我希望得到徽标，并且所有4个链接都独立工作。同样奇怪的是，当鼠标悬停在导航链接上时，它们会变得更加不透明，而不是褪色到1。希望我的最后一次编辑会清除一些想法@jhiggins，现在正在工作：）谢谢。另一个快速的例子，我注意到如果我在链接上快速运行鼠标，它几乎像是需要赶上，动画一直在运行，有没有办法阻止这种情况？@JHiggins，只需在

.fadeTo

前面加上

.stop（）

像

$（this.stop（）.fadeTo>）（

…仅供参考，您应该始终将属性值用引号括起来。虽然没有引号也可以工作，但如果不这样做，您会感到头疼。谢谢，我会将它们添加到：）

$('.nameorlogo, .navitems li').mouseenter(function()