Question

大家好，我试图在点击按钮上制作一个滑块效果，点击关于该部分的按钮详细信息出现在现在正在运行的特定div中，但我面临一个错误，如果我快点击如果我点击slide1然后在那个slide2之后，那么另一张幻灯片就会从那个看起来代码严重破坏的div溢出。请帮帮我或让我知道我错过了什么。我已经提供了部分代码来自我的jsp页面。

 <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>

Answer 1

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

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();  
       }) ;

滑动溢出，同时连续使用滑动和滑动

1 个答案: