Question

我使用this选择器为li和a元素中的图片设置动画

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>

图片没有任何关于moues进入的效果，为什么？

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 here进行演示。

Answer 3

正如已经指出的那样，img需要将css position属性设置为relative或absolute才能回复top }属性，即：

#mycarousel img {
    position: relative;
}

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

jQuery('img', this);

我用小提琴演示了这一点：http://jsfiddle.net/fPMUR/

这个选择器的子节点上的jquery动画

3 个答案: