How to add animation to current item

Question

vizz 0 Junior Poster

12 Years Ago

Following code of animated menu is working well,little bit, but when mouse pointer is over one list element, items inside all other list elements are animated.

I want to animate, items inside hovered list element only.

if mouse pointer is over about us, animate => div items inside about us list.

e.g. while code is running <li><a href="index1.html"><div class="mText">About us</div></a></li>, this looks like (because of append I used),

<li class="hoverItem">
    <a href="index1.html">
        <div class="mText" style="top: 0px;">About us</div>
        <div class="_area"></div>
        <div class="_overPl" style="bottom: 100px;"></div>
        <div class="_overLine" style="opacity: 0;"></div>
        <div class="mTextOver" style="top: -100px;">About us</div>
    </a>
</li>

My Code
Script

$( "ul.sf-menu > li" ).each(function(){                                      
    var conText = $(this).find('.mText').text();
    $(">a", this).append("<div class='_area'></div><div class='_overPl'></div><div class='_overLine'></div><div class='mTextOver'>"+conText+"</div>");
});


$("ul.sf-menu > li").mouseover(function() {
    $("li").removeClass('hoverItem');
    $(this).addClass('hoverItem');  
});



//How to combine following functions?????????


$( "ul.sf-menu > li" ).mouseover(function() {                                             
    $(".mText").stop(true).animate({top:"160px"}, 600, 'easeOutCubic');
    $(".mTextOver").stop(true).delay(150).animate({top:"50px"}, 500, 'easeOutCubic');
    $("._overPl").stop(true).animate({bottom:"0px"}, 500, 'easeOutCubic');
    $("._overLine").stop(true).animate({opacity:1}, 500, 'easeOutCubic');
}); 

$( "ul.sf-menu > li" ).mouseout(function() {
    $(".mText").stop(true).animate({top:"0px"}, 600, 'easeOutCubic');
    $(".mTextOver").stop(true).delay(20).animate({top:"-100px"}, 400, 'easeOutCubic');
    $("._overPl").stop(true).animate({bottom:"100px"}, 400, 'easeOutCubic');
    $("._overLine").stop(true).animate({opacity:0}, 500, 'easeOutCubic');
});

HTML

<div class="menuMov">
    <div class="menu">
        <ul class="sf-menu">
            <li><a href="index1.html"><div class="mText">About us</div></a></li>
            <li><a href="index2.html"><div class="mText">Gallery</div></a></li>
            <li><a href="index3.html"><div class="mText">Training</div></a></li>
            <li class="last"><a href="index4.html"><div class="mText">Find us</div></a></li>
        </ul>
    </div>
</div>

CSS

/*--- menu ------*/
.menuMov {
  position: relative;
  width: 100%;
  height: 115px;
  margin: 0 auto;
  margin-top: 0;
  z-index: 10;
}
.menu {
  position: relative;
  z-index: 1;
  display: inline-block;
  text-transform: uppercase;
}
.sf-menu {
  z-index: 3;
  position: relative;
  display: inline-block;
  margin: 15px 0 0;
}
.sf-menu > li {
  position: relative;
  color: #383636;
  display: inline-block;
  float: left;
  height: 115px;
  margin-right: 35px;
}
.sf-menu .last {
  margin-right: 0;
}
.sf-menu > li > a {
  display: block;
  position: relative;
  height: 115px;
  overflow: hidden;
  padding: 0;
}
.sf-menu > li > a:hover {
  text-decoration: none;
}
.sf-menu > li.active > a {
  text-decoration: none;
}
.mText {
  font: 600 15px/15px 'Open Sans', sans-serif;
  font-style: italic;
  color: #545454;
  position: absolute;
  width: 100%;
  z-index: 1;
  text-align: center;
  left: 0;
  padding-top: 50px;
}
.mTextOver {
  font: 600 15px/15px 'Open Sans', sans-serif;
  font-style: italic;
  color: #000000;
  position: relative;
  width: 100%;
  z-index: 3;
  text-align: center;
  top: -100px;
}
._area {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 5;
  left: 0;
  display: block;
}
._overPl {
  position: absolute;
  width: 100%;
  height: 84px;
  bottom: 100px;
  z-index: 2;
  left: 0;
  display: block;
  background: none;
}
._overLine {
  position: absolute;
  width: 100%;
  height: 4px;
  top: 111px;
  z-index: 10;
  left: 0;
  display: block;
  background: #1b1b1b;
  opacity: 0;
}
/*--- menu end ------*/

html-css javascript

Edited 12 Years Ago by vizz

3 Contributors
3 Replies
283 Views
3 Days Discussion Span
Latest Post 12 Years Ago Latest Post by vizz

Dani AI

Generated 9 Months Ago

Problem summary: the animation runs on every item because the selectors in the handlers are global (e.g. $('.mText')) rather than scoped to the hovered list item. was on the right track — use child/children/find/siblings and non-bubbling events. ’s JSFiddle idea is useful for reproducing the bug; if it works locally but not in JSFiddle the easing plugin is likely not being loaded there.

A simple, robust pattern is to toggle a single state class on the hovered <li> and let CSS do the motion. That keeps the JS minimal and ensures only the current item animates:

$('ul.sf-menu').on('mouseenter', 'li', function(){
  $(this).addClass('is-hover').siblings().removeClass('is-hover');
}).on('mouseleave', 'li', function(){
  $(this).removeClass('is-hover');
});

Use CSS transforms and transitions for smoother, GPU-accelerated animation and better mobile performance (avoid animating top/left where possible):

.mText {
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(.22,.61,.36,1), opacity .4s;
}
.is-hover .mText { transform: translateY(100%); }
._overLine { transition: opacity .4s; opacity: 0; }
.is-hover ._overLine { opacity: 1; }

Extra tips and gotchas:

If preferring jQuery animation, scope to the current item: $(this).find('.mText') (or cache var $a = $(this).children('a') then $a.find(...)). Avoid $('li').removeClass(...); use $(this).siblings().removeClass(...).
Use mouseenter / mouseleave (or delegated .on) instead of mouseover / mouseout to prevent bubbling issues.
When dynamically adding DOM, create elements via jQuery ($('<div>').addClass('_area')) rather than string-concatenation.
For JSFiddle: add the jQuery Easing script as an external resource and make sure it is listed after jQuery but before your code; missing the plugin explains why named easings (like easeOutCubic) do nothing.
Use .stop() carefully; .stop(true,true) clears queue and jumps to end which can produce abrupt jumps — test behavior to find the smoothest option.

All 3 Replies

wazz 0 Newbie Poster

12 Years Ago

i didn't read everything in detail, but i bet you're looking for one of these jquery selectors: child, children, siblings, :first-of-type, or something similar. for ex, in the very first code block above, the divs are children of the anchor; the anchor is a child of the li.
hth.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Member #120589 · Answer 1 · 2014-04-27T12:30:07+00:00

Be an idea if you set up a jsfiddle, so contributors could play with it :)

vizz 0 Junior Poster · Answer 2 · 2014-04-28T01:42:50+00:00

http://jsfiddle.net/ZtB57/

My code is working on PC but not working in jsfiddle How to add jquery.easing.js I'm using jquery-1.8.3.min.js

How to add animation to current item

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers