скольжение переполняется, пока слайд и слайд используются постоянно

Question

скольжение переполняется, пока слайд и слайд используются постоянно

0

Привет всем, здесь я попытался сделать эффект слайдера при нажатии кнопки, при нажатии кнопки подробности о том, что часть отображается в конкретном div, который работает сейчас, но я столкнулся с ошибкой здесь, если я нажимаю быстро, как если бы я щелкнул slide1 и после этого слайда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>

b22 24 сен. 2013, в 20:03

Источник

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

HC_ · Accepted Answer · 2013-09-24T15-25-00.000Z

Попробуйте добавить.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();  
       }) ;

@HC: большое спасибо. это решило мою проблему.
Рад слышать, нет проблем. Если вы не возражаете, не могли бы вы поставить галочку под цифрами в моем комментарии, чтобы пометить его как правильный?
Я сделаю это, я пытался сделать это, но он просил меня подождать несколько минут.