0

Hi every one here i tried to make a slider effect on click of button, on click of button details regarding that part appears in a particular div which is running now but i am facing a bug here which is if i click quickly like if i click slide1 and after that slide2 then the other slide is overflowing from that div which looks like code is breaking badly. please help me out or let me know what i am missing.i have provided that part of code form my 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>
4

1 回答 1

1

尝试添加 .stop()s 以防止动画堆叠，例如：（可能需要修改）

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();  
       }) ;
于 2013-09-24T17:25:29.287 回答