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
Post a Comment