javascript - jQuery hover no longer working after executing script -
here's setup have:
http://i.stack.imgur.com/varmv.png
if click on image b, switch image , image b. if click image e, switch image b , image e, , on.
however, want add hover effects whenever hover on image, darken image. have working when click on (for example) image b, switch image b , image image b dark , hover effects not work on image anymore.
i'm using wordpress:
<div id="content" class="site-content" role="main"> <div class="content_wrapper"> <div class="content_featured" style="float:left; "></div> <?php if ( have_posts() ) : ?> <?php $i = 1; ?> <div class="content_children" style="float:right"> <div class="content_left" style="float:left"> <?php while( have_posts() ) : the_post(); ?> <?php static $count = 0; if( $count == 5 ) { break; } else { if( $i == 1 ) { ?><span><span class="main active"><a href="javascript:void(0);"><div style="background:black; margin:2px;"><?php the_post_thumbnail('full');?></div></a></span></span><?php } else { ?><span class="child nonactive"><a href="javascript:void(0);"><div style="background:black; margin:2px;"><?php the_post_thumbnail('full'); ?></div></a></span><?php } $i++; $count++; } ?> <?php endwhile; ?> </div> <div class="content_right" style="float:right;"></div> </div> <?php twentythirteen_paging_nav(); ?> <?php else : ?> <?php get_template_part( 'content', 'none' ); ?> <?php endif; ?> </div> </div><!-- #content -->
here's script far:
jquery(document).ready(function() { divide_content($); cycle_images($); darken_images($); var main = jquery(".content_left span:first").html(); jquery(".content_left span:first").empty(); jquery(".content_featured").append(main); }); function cycle_images($) { $(".nonactive").click(function() { var = $(this).html(); var b = $(".active").html(); //alert(a+"\n\n"+b); $(this).empty(); $(".active").empty(); $(this).append(b); $(".active").append(a); }); } function divide_content($) { var size = $(".content_left > span").size(); $(".content_left > span").each(function(index) { if(index >= size / 2) { $(this).appendto(".content_right"); } }); } function darken_images($) { $(".nonactive img").hover(function() { $(this).fadeto(500, 0.5); }, function() { $(this).fadeto(500, 1); }); $(".content_featured").hover(function() { $(".active img").fadeto(500, 0.5); //alert("qwe"); }, function() { $(".active img").fadeto(500, 1); }); }
ps know wrong title don't know how else state it.
edit: here's best fiddle. link
Comments
Post a Comment