2016-04-20 3 views
1

Я создаю образец статического ползунка, который имеет 20% div слева и справа (пространство для отображения части следующего или предыдущего слайда) и 60% в центре, которые содержат основной слайд;JACKery одновременный элемент click

так, слайдер должен быть Somthing как

| 20% | 60% основной слайд | 20% |: Я должен сохранить этот процент фиксированным.

При щелчке один раз все работает отлично, иначе, когда я нажимаю на один из этих div, более одного одновременного нажатия основного слайдера должен перемещаться только на 60% (вправо или влево), но он вызывает больше одного вызова, поэтому основной слайд двигайтесь случайным образом!

Как предотвратить вызов функции множественного вызова до завершения аннуляции.

Отрывок:

$(document).ready(function(){ 
 
\t 
 
\t $("#slide-right").on("click", function(event){ 
 
\t \t event.stopImmediatePropagation 
 
\t \t slide('right'); 
 
\t }); 
 
\t 
 
\t $("#slide-left").on("click", function(event){ 
 
\t \t event.stopImmediatePropagation 
 
\t \t slide('left'); 
 
\t }); 
 
}); 
 

 
function slide(direction){ 
 
\t 
 
\t var slider_width = $("#slide_container").width(); 
 
\t $(".slide").each(function(index) { 
 
\t \t var elmnt_left = $(this).position().left; 
 
\t \t //alert(this.id) 
 
\t \t 
 
\t \t var val = 100 * elmnt_left/slider_width; 
 
\t \t var percentage = 0; 
 
\t \t 
 
\t \t // direction slide to left 
 
\t \t if(direction == 'left'){ 
 
\t \t \t if(index == 0) { 
 
\t \t \t \t if(val > -100) 
 
\t \t \t \t \t percentage = val - 60; 
 
\t \t \t } \t \t \t 
 
\t \t \t else if(index == 1) { 
 
\t \t \t \t if(val > -40) 
 
\t \t \t \t \t percentage = val - 60; 
 
\t \t \t } \t \t \t \t 
 
\t \t \t else if(index == 2){ 
 
\t \t \t \t if(val > 20) 
 
\t \t \t \t \t percentage = val - 60; 
 
\t \t \t } 
 
\t \t }else if (direction == 'right'){ // direction slide to right 
 
\t \t \t if(index == 0) { 
 
\t \t \t \t if(val < 20) 
 
\t \t \t \t \t percentage = val + 60; 
 
\t \t \t } \t \t \t 
 
\t \t \t else if(index == 1) { 
 
\t \t \t \t if(val < 80) 
 
\t \t \t \t \t percentage = val + 60; 
 
\t \t \t } \t \t \t \t 
 
\t \t \t else if(index == 2){ 
 
\t \t \t \t if(val < 140) 
 
\t \t \t \t \t percentage = val + 60; 
 
\t \t \t } 
 
\t \t } \t 
 
\t \t 
 
\t \t console.log() 
 
\t \t 
 
\t \t if(percentage !== 0){ \t 
 
\t \t \t $(this).animate({ 
 
\t \t \t \t left: percentage+'%' 
 
\t \t \t }, 400, function() { 
 
\t \t \t \t // Animation complete. 
 
\t \t \t \t 
 
\t \t \t }); 
 
\t \t } 
 
\t \t 
 
\t }); 
 
};
html,body { 
 
\t width:100%; 
 
\t height:100%; 
 
\t margin:0px; 
 
} 
 

 
.main{ 
 
\t width:100%; 
 
} 
 

 
#slide_container{ 
 
\t position:relative; 
 
\t width:100%; 
 
\t height:300px; 
 
\t overflow:hidden; 
 
\t text-align:center; 
 
} 
 

 
#slide_container .slide { 
 
\t position:absolute; 
 
\t width: 60%; 
 
\t border:0px solid #ccc; 
 
\t height:100%; 
 
\t display:inline-block; 
 
\t margin:0; 
 
\t opacity:0.7; 
 
} 
 

 
#slide_container .slide1 { 
 
\t background-color:green; 
 
\t left:20%; 
 
} 
 

 
#slide_container .slide2 { 
 
\t background-color:gray; 
 
\t left:80%; 
 
\t 
 
} 
 

 
#slide_container .slide3 { 
 
\t background-color:pink; 
 
\t left:140%; 
 
\t 
 
} 
 

 

 
#slide_container #slide-left { 
 
\t display:inline-block; 
 
\t height: 100%; 
 
\t width: 20%; 
 
\t left:0; 
 
\t position:absolute; 
 
\t z-index:100; 
 
} 
 

 
#slide_container #slide-right { 
 
\t display:inline-block; 
 
\t height: 100%; 
 
\t width: 20%; 
 
\t right:0; 
 
\t position:absolute; 
 
\t z-index:100; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
\t <div class="main"> 
 
\t \t <div id="slide_container"> 
 
\t \t \t <span id="slide-left"></span> 
 
\t \t \t <span id="slide-right"></span> 
 
\t \t \t <div> 
 
\t \t \t \t <div class="slide slide1" id="1" ></div> 
 
\t \t \t \t <div class="slide slide2" id="2" ></div> 
 
\t \t \t \t <div class="slide slide3" id="3" ></div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

+0

* «одновременный щелчок» * вы имеете в виду двойной щелчок? –

+2

Кстати, вы делаете это неправильно, вы не должны анимировать каждый .slide-элемент, а один родительский контейнер. –

+0

вы можете объяснить больше, пожалуйста! –

ответ

2

Как предотвратить многократный вызов функции щелчка, пока annimation время завершается?

псевдокоде:

$("#next").on("click", function(){ 
    if($("#slider").is(":animated")) return; 
    // animation logic here 
}); 
+0

Хорошо работает. –

+0

@bRIMOsBor приветствуются –

1

Вы также можете добавить класс в контейнере, когда анимация начинается и удалить класс, когда анимация ends.So этот класс присутствует только тогда, когда анимация происходит ,

Когда функция slide выполняется, вы можете проверить, присутствует ли этот класс, а если это так, верните значение false.

$(document).ready(function(){ 

$("#slide-right").on("click", function(event){ 
    event.stopImmediatePropagation 
    slide('right'); 

}); 

$("#slide-left").on("click", function(event){ 
    event.stopImmediatePropagation 
    slide('left'); 

}); 
}); 

function slide(direction){ 

if($("#slide_container").hasClass("animating")) { 
return false; 
}else{ 
$("#slide_container").addClass("animating"); 
} 

var slider_width = $("#slide_container").width(); 
$(".slide").each(function(index) { 

    var elmnt_left = $(this).position().left; 
    //alert(this.id) 

    var val = 100 * elmnt_left/slider_width; 
    var percentage = 0; 

    // direction slide to left 
    if(direction == 'left'){ 
     if(index == 0) { 
      if(val > -100) 
       percentage = val - 60; 
     }   
     else if(index == 1) { 
      if(val > -40) 
       percentage = val - 60; 
     }    
     else if(index == 2){ 
      if(val > 20) 
       percentage = val - 60; 
     } 
    }else if (direction == 'right'){ // direction slide to right 
     if(index == 0) { 
      if(val < 20) 
       percentage = val + 60; 
     }   
     else if(index == 1) { 
      if(val < 80) 
       percentage = val + 60; 
     }    
     else if(index == 2){ 
      if(val < 140) 
       percentage = val + 60; 
     } 
    } 

    console.log() 

    if(percentage !== 0){ 
     $(this).animate({ 
      left: percentage+'%' 
     }, 400, function() { 
      // Animation complete. 
      $("#slide_container").removeClass("animating"); 
     }); 
    } 

    }); 
}; 
0
if(percentage !== 0 && !window.animating) 
{ 
     $(this).animate({ 
      left: percentage+'%' 
     }, { 
      start: function(){ 
       window.animating = true; 
      }, 
      complete: function(){ 
       window.animating = false; 
      } 
     }); 
    } 

Добавление вар в чем-то "глобальное", как window может сделать трюк на мой взгляд.

Смежные вопросы