javascript - slide overflows while slideup and slide down is used continuesly -
hi every 1 here tried make slider effect on click of button, on click of button details regarding part appears in particular div running facing bug here if click if click slide1 , after slide2 other slide overflowing div looks code breaking badly. please me out or let me know missing.i have provided part of code form jsp page.
<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <style> .sp { background-color:white; width:788px; height:500px; float:left; text-align:center; font-size:100%; display:none; } </style> </head> <body> <div> <div style="width:200px;height:500px;background-color:#e6e6e6;text-align:center;float:left;"> <a class="last_item" id="slide1">slide1</a><br> <a class="last_item" id="slide2">slide2</a><br> </div> <div id="target1" class="sp"> slide1 details </div> <div id="target2" class="sp"> slide2 details </div> </div> <script type="text/javascript"> jquery(document).ready(function(){ jquery('#slide1').click(function(){ jquery('.sp').slideup(); jquery('#target1').slidedown(); }) ; jquery('#slide2').click(function(){ jquery('.sp').slideup(); jquery('#target2').slidedown(); }) ; }); </script> </body> </html>
try adding .stop()s prevent animation stacking, like: (may need modifications)
jquery('#slide1').click(function(){ jquery('.sp').stop(true, true).slideup(); jquery('#target1').stop(true, true).slidedown(); }) ; jquery('#slide2').click(function(){ jquery('.sp').stop(true, true).slideup(); jquery('#target2').stop(true, true).slidedown(); }) ;
Comments
Post a Comment