CODEWITHSUNDEEP
jqueryjquery-animate
user1163234
user1163234

Reputation: 2497

jquery children are not animating

I want to animate only specific children of a divbut if I specify the class nothing is animated. If I specify the parent class it is fine.

check out the jsfiddle: http://jsfiddle.net/7y5he/19/

HTML:

    <button id="left">Left</button>
<button id="right">Right</button>
<div class="target">
    <div id="targetDiv1" class="targetchild_no_animate" style="overflow:auto;height:20px;">AAA</div>
    <div id="targetDiv2" class="targetchild" style="overflow:auto;height:20px;">111</div>
    <div id="targetDiv3" class="targetchild" style="overflow:auto;height:20px;">22222</div>
    <div id="targetDiv4" class="targetchild" style="overflow:auto;height:20px;">33333</div>
     </div>
    <div class="tarWidth" style="top:100px;position:relative"></div>

 var rightCards = 0;
 var leftCards = 0;

 $("#left").click(function () {
   leftCards = '-' + $(".targetchild").width() + 'px';
   $(".targetchild").stop().animate({
     'left': leftCards
   });
   $('.tarWidth').text($(".targetchild").width() + 'px');
 });

    // Start animation in the opposite direction
 $("#right").click(function () {
   rightCards = '+' + $(".targetchild").width() + 'px';
   $(".targetchild").stop().animate({
     'left': rightCards
   });
   $('.tarWidth').text($(".targetchild").width() + 'px');
 });

Upvotes: 0

Views: 41

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

You need to set position for children, otherwise it is static:

DEMO jsFiddle

div.targetchild {
    position:relative;
}

Upvotes: 2

Related Questions