JavaScript loop to target a specific item

My goal is to animate the correct div under each navigation item, rather than all of them with the "navItemUnder" class. You can see exactly what I mean by hovering over a navigation item in this codePen.

I am looking for a solution to target only one line under the specific nav item, while keeping the structure of our HTML intact.

View the animation on codePen: http://codepen.io/celli/pen/bpRLRM

$(".navItem").hover(over, out);
function over(){
TweenMax.to(".navItemUnder", 1, {opacity:1.0, scaleX:1,     ease:Expo.easeOut})
}
function out(){
TweenMax.to(".navItemUnder", 1, {opacity:0.0, scaleX:.1,     ease:Expo.easeOut})
}
javascriptgsap

Answer №1

If you want to distinguish between elements, you can utilize the id attribute:

http://codepen.io/anon/pen/ZWyRjg

var activeItem;

TweenMax.set(".navItemUnder", {
  opacity: 0,
  scaleX: .1,
  transformOrigin: "top left"
})

$(".navItem").hover(over, out);

function over(e) {
  activeItem = e.toElement.id;
  TweenMax.to("#" + activeItem + "_under", 1, {
    opacity: 1.0,
    scaleX: 1,
    ease: Expo.easeOut
  })
}

function out(e) {
  TweenMax.to("#" + activeItem + "_under", 1, {
    opacity: 0.0,
    scaleX: .1,
    ease: Expo.easeOut
  })
}
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
nav {
  margin-top: 50px;
  margin-left: 50px;
}
.lines {
  float: left;
  clear: both;
  margin-left: 50px;
}
ul li {
  display: block;
  float: left;
  padding: 0 4px;
  margin: 0 4px;
  text-align: center;
}
.navItem {
  width: 46px;
  height: 26px;
  background: transparent;
  cursor: pointer;
}
.navItemUnder {
  width: 46px;
  height: 2px;
  background: green;
  padding-top: 0;
  margin-top: 0;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<nav>
  <ul>
    <li class="navItem" id="item1">Item 1</li>
    <li class="navItem" id="item2">Item 2</li>
    <li class="navItem" id="item3">Item 3</li>
    <li class="navItem" id="item4">Item 4</li>
  </ul>
</nav>

<div class="lines">
  <ul>
    <li class="navItemUnder" id="item1_under"></li>
    <li class="navItemUnder" id="item2_under"></li>
    <li class="navItemUnder" id="item3_under"></li>
    <li class="navItemUnder" id="item4_under"></li>
  </ul>
</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

Why are NodeJS and Jade/Pug variables not being recognized in the Jade script?

After successfully passing a variable to Jade like #{myvar}, I encountered an issue when trying to access it in a script block. Despite using typeof(myvar) and confirming that it was initially undefined, my attempts to display its value within the script b ...

javascriptnode.jsexpresspug

Steps to creating an elliptical border using CSS

Is there a way to apply CSS styles specifically to the left border of a div to achieve an elliptical shape, while keeping other borders normal? I've managed to create a semi-ellipse with the following code, but the rest of the border remains unchanged ...

javascripthtmlcss

JavaScript data manipulation: Determining percentage change within a nested JSON structure

Provided is a JSON file structured like this... data =[ { key: "london", values: [ {day: "2020-01-01", city: "london", value: 10}, {day: "2020-01-02", city: "london", value: 20}, {day: " ...

javascriptjsondata-wrangling

Ensure that confirmation is only prompted in ASP.NET when necessary

I am faced with a scenario where I need to handle the value of Session["actionMode"] in conjunction with a button click event. Here is what I currently have implemented in my code: protected void Button1_Click(object sender, EventArgs e) { if ((int)S ...

javascriptasp.net

Adding existing tags to Select2 in Angular2 can be accomplished by following these steps:

HTML: <select data-placeholder="Skill List" style="width:100%;" class="chzn-select form-control" multiple="multiple"> <option *ngFor="#skill of allSkills" [ngValue]="skill">{{skill}} </option> </select> TS: allSkills = [& ...

javascriptangularjsangulartypescript

Tips for improving modularity in my frontend JavaScript code?

I'm currently developing a unique Node.js / Express application that visually represents text notes as a network to offer users a clear summary of the connections between different notes. The project heavily relies on frontend functionalities, requir ...

javascriptnode.jsmodularity

Adjust the HTML content prior to displaying it to prevent any flickering

Is there a way to run code before the page is rendered, such as updating dates or converting text to HTML, without causing flickering when reloading multiple times? How can I ensure the code runs as it's drawn instead of waiting until the end to redra ...

javascripthtml

Using the attribute data-ng-repeat along with the <option> tag allows for dynamic iteration and

Hello there, I am a beginner with AngularJS and I am struggling to understand how to create my <option> list. I would like my output to resemble the example in this fiddle: http://jsfiddle.net/XdpJv/ This is what my current code looks like: <se ...

javascripthtmlangularjs

Sending the id as a prop in react-router-dom

Is it possible to pass an ID in props to a React component using react-router-dom? Take a look at my app.js file below: <Switch location={this.props.location}> <Route exact path="/" component={Home} /> <Route path= ...

javascriptreactjsreact-router-dom

In Certain Circumstances, Redirects Are Applicable

I have set up Private Routing in my project. With this configuration, if there is a token stored in the localStorage, users can access private routes. If not, they will be redirected to the /404 page: const token = localStorage.getItem('token'); ...

javascriptreactjstypescriptreact-routerreact-router-v4

Does anyone have a solution for resetting the ID numbers in a flatlist after removing an item from it?

As the title suggests, I am facing an issue with the following scenario: { id: '1', name: 'one' }, { id: '2', name: 'two' }, { id: '3', name: 'three' }, { id: '4', name: &apo ...

javascriptarraysreact-nativereact-native-flatlistreact-flatlist

Simple method to retrieve the ID of an input field within a form using jQuery selectors

I have a form with each input field having a unique id, and I have attached a jQuery 'input' event to the form. I want to retrieve the id of the field on which the user changes some value using a jQuery function. There seems to be something missi ...

javascriptjquery

Issues with looping in Internet Explorer 8

Hey, I'm having an issue with this JavaScript function: function test(){ var count = 0; var date1 = $('#alternatestartdate').val(); var date2 = $('#alternateenddate').val(); ...

javascriptjquery

Guide to Binding a JSON Property (Set or Array) to an Interactive Input Form in AngularJS

My input form is structured like this: <div> <div class="form-group"> <label for="inputQuestion" class="col-sm-2 control-label">Question</label> <div class="col-sm-10"> <input data-ng-model="publication.qu ...

javascriptangularjsdata-bindingangularjs-ng-model

Retrieve the id of the anchor tag that was selected upon clicking, and then dynamically change the content of another div

Seeking guidance on how to dynamically change the content of a div element based on which anchor tag is clicked. Below is the HTML structure and JavaScript function I have attempted: HTML: <div> <a id="a1" href="javascript: changeDiv();">tag1 ...

javascripthtml

Adding client-side scripts to a web page in a Node.js environment

Currently, I am embarking on a project involving ts, node, and express. My primary query is whether there exists a method to incorporate typescript files into HTML/ejs that can be executed on the client side (allowing access to document e.t.c., similar to ...

javascriptnode.jstypescriptexpress

Error: The checkbox was clicked, but an undefined property (includes) cannot be read

Link to live project preview on CodeSandbox Visit the product page with checkbox I have developed a code snippet that allows users to filter products by checking a box labeled "Show Consignment Products Only", displaying only those products with the term ...

javascriptreactjstypescript

Ordering an Array of JavaScript Objects in a Custom Sequence (utilizing pre-existing methods)

Imagine we have an array of objects: ["c", "a", "b", "d"] Is there a way in ECMAScript or through a third-party JavaScript library to rearrange the objects in the first array to match the order specified by the second array, all within one line or functi ...

javascriptjqueryarrayssortingunderscore.js

Guide on Capturing Szimek/Signature_Pad using PHP: How to Save Javascript as PHP Variable?

While perusing through StackOverflow, I stumbled upon Szimek/Signature_Pad which allows for the capturing of electronic/digital signatures using Javascript. Even after conducting research, I still find myself puzzled on how to capture the DATA URI into a ...

phpjavascript

How to troubleshoot an Ionic exception occurring during the execution of any Ionic command?

Whenever I attempt to run an ionic command, I keep encountering this error message: { Error at FatalException.Exception (C:\Users\crist\AppData\Roaming\npm\node_modules\ionic\node_modules\@ionic\cli-u ...

javascriptcordovanpmionic2ionic3