CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
J Higgins
J Higgins

Reputation: 43

How to apply animations to items in a list

I am new to HTML, CSS and JS/jQuery. I'm creating a test website just to get familiar with jQuery and can't seem to figure an issue out.

I have a navigation bar at the top of the page which contains a logo on the left and links on the right. I've set up the below jQuery code to fade the links in and out upon mouse enter/leave:

$(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);
  })
};

Here is the 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>

The problem I have is when I hover over a link, either nav links or the logo, everything fades in and out, I want them all to be independant.

I know you can do this in CSS, this is purely to help me learn and understand.

Thanks for your help.

Jim

Upvotes: 0

Views: 42

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206699

Use the the this keyword like $(this) to refer to the currently hovered item

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

Also, notice that .navitems is the whole UL element, while you need to target the LI elements. Therefore

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

Additionally here's other similar ways to achieve what you desire:

using .on() method

$('.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>

Using .hover() method

$('.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>

Upvotes: 1

Related Questions