Javascript Loop Zur Auswahl bestimmter Artikel

Question

Ich versuche, die richtige div unter jedem Navigationselement zu animieren, anstatt von allen von ihnen mit der Klasse "navItemUnder" - Sie können in diesem CodePen sehen, was ich meine, wenn Sie den Mauszeiger über eines der Navigationselemente.

Ich möchte einen Weg, um nur eine Zeile unter dem rechten Nav-Element zu wählen, während die Art, wie wir das HTML intakt haben.

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

Answer 1

Sie können das id Attribut um die Elemente unterscheiden:

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>