"Hovering over an element triggers a jQuery animation that adds

Everything works perfectly fine.

The concept is to create a highlighting effect (such as a background color or underline) that follows you as you hover over the different links in the navigation. It dynamically calculates the left positioning and width, animating accordingly.

What needs to be adjusted?

  • When mouse leaves or hovers out, the highlighted border should return to the active item
  • The starting highlighted item should always remain as the active one

If further information is required, feel free to ask. I'm unsure of what might be missing.

$(function() {

  $(".app-promo-img-align:first").addClass("active");

  $('.app-promo-images').find('.app-promo-img-align').click(function(e) {
    e.preventDefault;
    $(".app-promo-img-align").removeClass("active");
    $(this).addClass("active");
  });

  var $el, leftPos, newWidth,
    $mainNav = $(".menu");

  $mainNav.append("<div id='magic-line'></div>");
  var $magicLine = $("#magic-line");

  $magicLine
    .width($(".app-promo-img-align.active").width())
    .css("left", $(".app-promo-img-align.active a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

  $(".menu li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });

  }).click(function() {
    $mainNav.find('li').removeClass('active');
    $(this).parent().addClass('active');
    $magicLine.animate({
      left: $(".app-promo-img-align.active a").position().left,
      width: $(".app-promo-img-align.active").width()
    });
  });


  $('.menu li:not(".app-promo-img-align.active")').hover(
    function() {
      $('#magic-line').addClass('hover');
    },
    function() {
      $('#magic-line').removeClass('hover');
    }
  );

});
.bg {
  height: 300px;
  background: #000;
  padding-top: 50px;
}

.menu {
  padding: margin: 0 auto;
  list-style: none;
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  width: 100%;
}

.menu li {
  display: inline-block;
}

.menu li a {
  background: #bbb;
  width: 80px;
  height: 80px;
  display: block;
  float: left;
  text-decoration: none;
  text-transform: uppercase;
}

.menu li a:hover {
  color: white;
}

#magic-line {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100px;
  height: 4px;
  background: #fe4902;
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out
}

#magic-line.current_page_item {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: #fe4902;
}

#magic-line.hover {
  background: #fe4902;
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out;
  transition: background 400ms ease-in-out;
}

.app-promo-img-align a {
  position: relative;
}

.app-promo-img-align.active a {
  width: 93px;
  height: 93px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg">
  <div class="nav-wrap">
    <ul class="group menu app-promo-images" id="example-one">
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
    </ul>
  </div>
</div>
javascriptjqueryhtmlcss

Answer №1

Implemented an unhover functionality.

$(function() {

  $(".app-promo-img-align:first").addClass("active");

  $('.app-promo-images').find('.app-promo-img-align').click(function(e) {
    e.preventDefault;
    $(".app-promo-img-align").removeClass("active");
    $(this).addClass("active");
  });

  var $el, leftPos, newWidth,
    $mainNav = $(".menu");

  $mainNav.append("<div id='magic-line'></div>");
  var $magicLine = $("#magic-line");

  $magicLine
    .width($(".app-promo-img-align.active").width())
    .css("left", $(".app-promo-img-align.active a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

  $(".menu li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });

  }, function(){
  $el = $('li.active');
  console.log($el);
    leftPos = $el.position().left;
    newWidth = $el.width();
    console.log(leftPos, newWidth);
    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });
  }).click(function() {
    $mainNav.find('li').removeClass('active');
    $(this).parent().addClass('active');
    $magicLine.animate({
      left: $(".app-promo-img-align.active a").position().left,
      width: $(".app-promo-img-align.active").width()
    });
  });
 

  $('.menu li:not(".app-promo-img-align.active")').hover(
    function() {
      $('#magic-line').addClass('hover');
    },
    function() {
      $('#magic-line').removeClass('hover');
    }
  );

});
.bg {
  height: 300px;
  background: #000;
  padding-top: 50px;
}

.menu {
  padding: margin: 0 auto;
  list-style: none;
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  width: 100%;
}

.menu li {
  display: inline-block;
}

.menu li a {
  background: #bbb;
  width: 80px;
  height: 80px;
  display: block;
  float: left;
  text-decoration: none;
  text-transform: uppercase;
}

.menu li a:hover {
  color: white;
}

#magic-line {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100px;
  height: 4px;
  background: #fe4902;
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out
}

#magic-line.current_page_item {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: #fe4902;
}

#magic-line.hover {
  background: #fe4902;
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out;
  transition: background 400ms ease-in-out;
}

.app-promo-img-align a {
  position: relative;
}

.app-promo-img-align.active a {
  width: 93px;
  height: 93px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg">
  <div class="nav-wrap">
    <ul class="group menu app-promo-images" id="example-one">
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
    </ul>
  </div>
</div>

Answer №2

One easy solution is to simply adjust your line position when the mouse leaves the active element on mouseout. 

$(function() {

  $(".app-promo-img-align:first").addClass("active");

  $('.app-promo-images').find('.app-promo-img-align').click(function(e) {
    e.preventDefault;
    $(".app-promo-img-align").removeClass("active");
    $(this).addClass("active");
  });

  var $el, leftPos, newWidth,
    $mainNav = $(".menu");

  $mainNav.append("<div id='magic-line'></div>");
  var $magicLine = $("#magic-line");

  $magicLine
    .width($(".app-promo-img-align.active").width())
    .css("left", $(".app-promo-img-align.active a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

  $(".menu li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });

  }).click(function() {
    $mainNav.find('li').removeClass('active');
    $(this).parent().addClass('active');
    $magicLine.animate({
      left: $(".app-promo-img-align.active a").position().left,
      width: $(".app-promo-img-align.active").width()
    });
  }).on('mouseout', function() {
    $el = $(".app-promo-img-align.active a");
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });
  });


  $('.menu li:not(".app-promo-img-align.active")').hover(
    function() {
      $('#magic-line').addClass('hover');
    },
    function() {
      $('#magic-line').removeClass('hover');
    }
  );
});
.bg {
  height: 300px;
  background: #000;
  padding-top: 50px;
}

.menu {
  padding: margin: 0 auto;
  list-style: none;
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  width: 100%;
}

.menu li {
  display: inline-block;
}

.menu li a {
  background: #bbb;
  width: 80px;
  height: 80px;
  display: block;
  float: left;
  text-decoration: none;
  text-transform: uppercase;
}

.menu li a:hover {
  color: white;
}

#magic-line {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100px;
  height: 4px;
  background: #fe4902;
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out
}

#magic-line.current_page_item {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: #fe4902;
}

#magic-line.hover {
  background: #fe4902;
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out;
  transition: background 400ms ease-in-out;
}

.app-promo-img-align a {
  position: relative;
}

.app-promo-img-align.active a {
  width: 93px;
  height: 93px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg">
  <div class="nav-wrap">
    <ul class="group menu app-promo-images" id="example-one">
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
    </ul>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to assign an HTML string to the DOM and connect it with an object?

In my angular HTML component template, I have the following markup: <div *ngIf="htmlTemplate && jsonObj" [innerHTML]="htmlTemplate"></div> The jsonObj variable is retrieved from an endpoint and looks like this: { fi ...

htmlangularbind

Guide to smoothly transitioning a collection of heterogeneous foreign elements within varying time intervals using D3

I am currently experimenting with transitioning opacities of a group of foreignObject text. My goal is to have each element transition individually at random durations, rather than all at the same time. Is it possible to achieve this without creating sep ...

javascriptanimationd3.jstransitionopacity

Replacing variables in a function: A step-by-step guide

I have frequently used the replace function to eliminate classes in JavaScript. Currently, I am working on creating a JavaScript function that allows me to remove a specific class from an element by passing in the element and the class name. changeAddress ...

javascripthtmlregexjavascript-objects

I'm unsure of how to eliminate the border outline on this particular text area

The textarea has an unwanted blue outline, and despite trying outline:none; in the CSS, it's still there. See the code below: #floatingTextarea { border: none; outline: none; } <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/ ...

htmlcss

Get a captcha using Selenium in Java

I am currently working on obtaining a CAPTCHA image. My previous question mentioned this in this post. I have managed to successfully fill out the necessary forms and download the CAPTCHA, however, it appears to be random each time. This is my current co ...

javahtmlseleniumxpathimagedownload

Compiling TypeScript to JavaScript with Intellij IDEA while preserving the folder hierarchy

Seeking assistance with maintaining directory structure when compiling Typescript to Javascript in Intellij Idea. The current directory setup is as follows: root - ts - SomeClass1.ts - SomeFolder - AwesomeClass2.ts - tsc The desired compiled file ...

javascriptintellij-ideatypescript

Having trouble displaying a JSON response on an HTML page with AJAX

I've written an AJAX function that goes like this: function ajx(){ var ajaxRequest; // This variable makes Ajax possible! try{ // Works in Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // For Internet Exp ...

javascriptajaxjson

Alignment problem in CSS, identical code on two separate servers

After transitioning from the design phase to development, I encountered a strange CSS issue on one small section of my client's website. Specifically, in the "Official NGK Canada Part Finder" section, the text is breaking onto new lines unexpectedly. ...

htmlcssalignment

How come the instanceof operator does not function on Error subclass instances when using babel-node?

It has come to my attention that the instanceof operator is not functioning as expected on instances of subclasses of Error when using babel-node version 6.1.18 and Node version 5.1.0 on OS X. Why could this be happening? Interestingly, the code works perf ...

javascriptnode.jsecmascript-6babeljs

vertically centering a div specifically on laptops

What is the best way to vertically center a div on lap-tops? (...) body {padding: 4% 16%;} body {top:0px; left:0px; bottom:0px; right:0px;} body {border: 12px solid darkred; border-style: double;} body {background-color: #FAFCB4;} p {font-size: 80%; text- ...

htmlcss

Implementing a restriction on the highest page number possible and including navigational buttons for moving between

I have successfully created a pagination system using a text file as the database instead of relying on mySQL. However, I am facing an issue with limiting the maximum page numbering at the bottom of the page. Is there a way to restrict the page numbers dis ...

phphtmlpaginationtxt

Creating a vertical-flipping book in Javascript with the "Booklet" plugin

I have successfully integrated a jQuery plugin that allows for horizontal-flipping of pages into my project. You can find the plugin here: Not only have I used it for traditional applications, but I have also been able to adapt it for less conventional fo ...

javascriptjqueryflip

When using server-side rendering in React with AJAX, an error may occur if trying to call setState

In order to display data to the user, I rely on the response from the AJAX request as I store all necessary information in the database. My component GenericPage.jsx: export default class GenericPage extends React.Component { componentWillMount() { ...

javascriptajaxexpressreactjsflux

Is there a method to prompt Angular to alert me when utilizing an undeclared directive in a template?

At times, I find myself making typos in the angular directive's name or the element tag within its template. However, the only indication I receive is the directive mysteriously disappearing. It would be helpful if angularjs could alert me when I at ...

javascriptangularjs

responsive full-screen navigation bar, combined with an image and text elements

I am completely new to Front end development, and this is my very first client project where I could really use some assistance. Could someone please guide me on how to ensure that everything on the website is responsive for mobile and tablet devices? Be ...

htmlcssreactjsflexboxresponsive-design

Deactivating one div's class upon clicking on another div

Below is the HTML code snippet: <div class="container"> <ul class="navbar"> <li class="nb-link"><a>Home</a></li> <li class="dropdown"> <a>CBSE</a> <ul class="dropdown-menu"&g ...

javascriptjqueryhtmlcss

Is there a way to showcase MySQL result data under the corresponding <thead> day column?

A unique attendance chart was created in PHP from the returned database result. However, it is not displaying under its corresponding day rows (thead). The database resulted in a multi-array as shown below: print_r($data) Array ( [0] => Array ( ...

phparrayshtmlmultidimensional-arraylogic

MONGO and Node.js: Understanding how to extract an object from an array

Is there a way to extract a specific object from an array of objects? I only require that particular object. Here is the array in question: { "net" : "192.168.1.1/24", "_id" : ObjectId("531d1c2d857831021c48e3af"), "ips" : [ { ...

javascriptnode.jsmongodb

What is the best way to trigger an event in VueJS?

I recently implemented a table using Vuetify in my project. The table is now split into two components - the Table component and the Row component. My challenge is how to handle the same function, this.selected = !this.selected!, when dealing with 2 differ ...

javascriptvue.js

Can a single controller function in ASP.NET MVC4 be used to send back two arrays to the view?

Continuing from my previous query here, I am working with a model called SchoolTestsPerModulePerStudent which looks like this: public partial class SchoolTestsPerModulePerStudent { public long StudentID { get; set; } public long ModuleID { get; se ...

javascriptasp.netarraysjsonasp.net-mvc-4