JQuery - making a list 3 or more img toggles go to their default image when one of them is toggled via click event -
here's jsfiddle.
i can 2 divs toggle , have other div reset it's original img, can't 3 or more divs. i'm doing wrong eq methods, not sure what.
html:
<div class="home"> <img src="http://www.misfitpsycles.com/blog/wp-content/uploads/2011/09/red-circle.jpg"> <img style="display:none;" src="http://tribute.dbclay.com/img/badjorx/black-circle.jpg"> </div> <div class="myplayer"> <img src="http://upload.wikimedia.org/wikipedia/commons/d/d5/blue_circle_o.jpg"> <img style="display:none;" src="http://i00.i.aliimg.com/img/pb/301/829/308/308829301_525.jpg"> </div> <div class="mycareer"> <img src="http://farm3.staticflickr.com/2226/1667080567_172c7871d3.jpg"> <img style="display:none;" src="http://www.venatu.com/images/ge/purple-circle.png"> </div>
jquery:
$('div').click(function(){ $(this).find('img:hidden').addclass('tofadein'); $(this).find('img:visible').addclass('tofadeout'); $(this).find('img.tofadein').fadein(); $(this).find('img.tofadeout').fadeout(); $(this).find('img').removeclass(); $(this).siblings('div').find('img').eq(0).fadein(); $(this).siblings('div').find('img').eq(1).fadeout(); $(this).siblings('div').find('img').eq(2).fadeout(); });
i think fiddle accomplishes you're trying do:
basically key add each function doing every sibling. removed div siblings function because isn't necessary in example. may still need in actual code. lastly, no .eq(2) exists. guessing experimenting one.
heres new js
$('div').click(function(){ $(this).find('img:hidden').addclass('tofadein'); $(this).find('img:visible').addclass('tofadeout'); $(this).find('img.tofadein').fadein(); $(this).find('img.tofadeout').fadeout(); $(this).find('img').removeclass('tofadein').removeclass('tofadeout'); $(this).siblings().each(function(){ $(this).find('img').eq(0).fadein(); $(this).find('img').eq(1).fadeout(); }); });
Comments
Post a Comment