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

时间：2017-04-04 14:50:52

标签： javascript jquery html css animation

我是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>

我遇到的问题是，当我将鼠标悬停在链接上时，无论是导航链接还是徽标，一切都会淡入淡出，我希望它们都是独立的。

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

感谢您的帮助。

吉姆

1 个答案:

答案 0 :(得分：1)

使用this之类的$(this)关键字来引用当前悬停的项目 

    $(this).fadeTo('fast', 1);

另外，请注意.navitems是整个UL元素，而您需要定位LI元素。因此

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

此外，还有其他类似方法可以实现您的目标：

使用.on()方法

$('.nameorlogo, .navitems li').on({
  mouseenter : function() {
    $(this).stop().fadeTo(250, 1);
  },
  mouseleave : function() {
    $(this).stop().fadeTo(250, 0.5);
  },
});
// .stop() is here to prevent animation buildups
.nameorlogo,
.navitems li{
  opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

使用.hover()方法

$('.nameorlogo, .navitems li').hover(function(evt) {
  var isMouEnt = evt.type === "mouseenter";
  $(this).stop().fadeTo(250, isMouEnt ? 1 : 0.5);
});
// .stop() is here to prevent animation buildups
.nameorlogo,
.navitems li{
  opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

相关问题
最新问题