CODEWITHSUNDEEP
jqueryhtmlcss
Moslem7026
Moslem7026

Reputation: 3338

jquery animation on child of this selector

i have used this selector to animate an image in the li and a element

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>

image no have any effet on moues enter , why ?

Upvotes: 0

Views: 87

Answers (3)

Nicklas Nygren
Nicklas Nygren

Reputation: 2605

As has been pointed out, the img needs to have the css position attribute set to either relative or absolute in order to respond to the top attribute, i.e:

#mycarousel img {
    position: relative;
}

Secondly, an elegant way to select a child element with jQuery is:

jQuery('img', this);

I have demonstrated this in a fiddle: http://jsfiddle.net/fPMUR/

Upvotes: 1

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

This is short and also should work:

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

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

Upvotes: 1

Jonathan Naguin
Jonathan Naguin

Reputation: 14766

You are trying to animate a property that depends of the type of position of that element. Try with margin-top or padding-top instead of top or add position: absolute to the image.

Working demo with padding-top here.

Upvotes: 1

Related Questions