Question

所以我有多篇文章：

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

我希望添加一个效果，其中产品标题（product-foot）将在缩略图下方向产品框右侧移动50像素悬停。因此jquery代码就是这样的，对吧？

$("#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);});

然而，由于我有多篇文章，效果会对每一篇都有效，但我希望它只适用于我正在徘徊的那篇。也就是说，如果我将鼠标悬停在#product-box元素上，我希望其中的#product-foot子元素能够生成动画。我想知道是否有办法做到这一点？

Answer 1

$（＆＃34; #products＆gt; #product-box＆＃34;）。mouseover（function（）{

以上代码仅适用于单个i意思是第一篇文章。

使您的代码适用于您可以执行此操作的所有文章

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

参考此jQuery Selectors

因此，要以这种方式为当前产品包装盒上的孩子设置动画

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

希望这有助于!! ..

jQuery Animation Queue＆amp;这个功能

1 个答案: