html - jQuery Animation Queue & This Function -


so i've got multiple articles of:

<article id="product-box">     <header id="product-head"><!--thumbnail--></header>     <footer id="product-foot"><span class="product-element">product title</span></footer> </article> 

and want add effect product title(product-foot), under thumbnail move 50 pixels right on product box hover. therefore jquery code this, right?

$("#products > #product-box").mouseover(function(){ $("#products > #product-box > #product-foot").stop().animate({'margin-left': '20px'},500);}); $("#products > #product-box").mouseout(function(){ $("#products > #product-box > #product-foot").stop().animate({'margin-left': '0px'},500);}); 

however, since have multiple articles effect work on every 1 of them, want work on 1 i'm hovering on. if hover on #product-box element, want #product-foot child element in animate. wondering if there way this?

$("#products > #product-box").mouseover(function(){

the above code works single mean first article.

to make code work articles can this

$("[id=product-box]").mouseover(   //..this makes code work on product box elements 

refer jquery selectors

so animate children on present product box way

$("[id=product-box]").mouseover(function(){       $(this).children("#product-foot").stop().animate({'margin-left': '20px'},500);}); 

hope helps!!..


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -