0

こんにちは、ここにいる皆さん、ボタンのクリックでスライダー効果を作ろうとしました。ボタンのクリックで、その部分に関する詳細が現在実行中の特定の div に表示されますが、ここでバグに直面しています。スライド1とそのスライド2の後に、コードがひどく壊れているように見えるその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>
4

1 に答える 1

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