jquery - 此选择器的子项上的 jquery 动画

Question

我已经使用选择器为and元素this中的图像设置动画lia

jQuery

 jQuery(document).ready(function () {
            jQuery(".jcarousel-skin-tango  li").mouseenter(function () {
                jQuery(this).children("a").children("img").animate({
                    top: '10px'
                }, 2000);
            });
 });

html

 <ul id="mycarousel" class="jcarousel-skin-tango">
            <li>
                <a href="http://google.com/">
                    <img alt="" src="item1.gif" /><span>adfadf</span></a>
            </li>
</ul>

图像对鼠标进入没有任何影响，为什么？

Answer 1

这很短，也应该有效：

jQuery(document).ready(function () {
     jQuery(".jcarousel-skin-tango  li").mouseenter(function () {
          jQuery("img" , this).animate({
                top: '10px'
          }, 2000);
     });

JSFiddle：http: //jsfiddle.net/7H7y9/1/

Answer 2

您正在尝试为取决于该元素位置类型的属性设置动画。尝试使用margin-top或padding-top代替top或添加position: absolute到图像中。

在这里使用 padding-top 进行工作演示。

Answer 3

正如已经指出的那样，img需要将 cssposition属性设置为relativeorabsolute以响应该top属性，即：

#mycarousel img {
    position: relative;
}

其次，使用 jQuery 选择子元素的一种优雅方式是：

jQuery('img', this);

我已经在小提琴中证明了这一点：http: //jsfiddle.net/fPMUR/