jquery 选择器

发布于 2024-09-07 20:16:24 字数 662 浏览 2 评论 0原文

我在选择要在 jquery 中设置动画的 div 时遇到问题。我有这个 html，

<div id="perimg">  
<a class="false" href="show_model.php?param=Addison">  
<div id="name_container"><img id="slide" src="../../pictures/picture.jpg"><div id="name">Picture name</div></div>  
</a>  
</div>

我使用了该标记，因为我想在悬停时将 #name 向上滑动到图片上。我每行 3 张图片，每行 8 行，我的 jquery 仅针对第一张图片。

$('#slide').hover(function(){
$(this).parent().find('#name').animate({"bottom" : 0}, 800)
}, function(){
$(this).parent().find('#name').animate({"bottom" : "-20px"}, 800)
});

我什至尝试过 $('#perimg').children() 但这也没有帮助。

原文

I'm having problems selecting the div i want to animate in jquery. I have this html

<div id="perimg">  
<a class="false" href="show_model.php?param=Addison">  
<div id="name_container"><img id="slide" src="../../pictures/picture.jpg"><div id="name">Picture name</div></div>  
</a>  
</div>

I used that markup because i want to slide up the #name over the picture on hover. I have 3 pictures per row and 8 rows and my jquery only targets the first image.

$('#slide').hover(function(){
$(this).parent().find('#name').animate({"bottom" : 0}, 800)
}, function(){
$(this).parent().find('#name').animate({"bottom" : "-20px"}, 800)
});

I even tryed going $('#perimg').children() but that didn't help either.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

荒芜了季节 2024-09-14 20:16:24

由于您想要为多个图像和 div 设置动画，请使用类而不是 id。另外你的代码是错误的，试试这个：

HTML:

<div id="perimg">  
<a class="false" href="show_model.php?param=Addison">  
<div id="name_container"><img class="slide" src="../../pictures/picture.jpg"><div class="name">Picture name</div></div>  
</a>  
</div>

jQuery:

$('.slide').hover(function(){
  $(this).find('.name').animate({"bottom" : 0}, 800)
  }, function(){
  $(this).find('.name').animate({"bottom" : "-20px"}, 800)
});

Since there are multiple images and divs you want to animate, use classes instead of ids. Also your code is wrong, try this:

HTML:

<div id="perimg">  
<a class="false" href="show_model.php?param=Addison">  
<div id="name_container"><img class="slide" src="../../pictures/picture.jpg"><div class="name">Picture name</div></div>  
</a>  
</div>

jQuery:

$('.slide').hover(function(){
  $(this).find('.name').animate({"bottom" : 0}, 800)
  }, function(){
  $(this).find('.name').animate({"bottom" : "-20px"}, 800)
});

回复收藏 0 原文