jQuery綁定單擊事件到用戶界面滑塊

Question

我有一些jQuery的過渡幻燈片鼠標滾輪。我已經添加了jQuery滑塊，並綁定了基於ui.value和當前幻燈片索引的click事件來轉換幻燈片。問題在於，如果不將滑塊移動到較快的位置，它可以正常工作，但如果將其移動得太快，滑動過渡當前索引就會與ui.value不一致。 ui.value是正確的，所以我認爲這裏的點擊事件被跳過了？網站mixmastercocktails.com，點擊幻燈片的主圖像顯示。關於如何確保點擊事件被調用的任何想法？

$('#slider-vertical').slider({ 
    orientation: 'vertical', 
    range: 'min', 
    min: 1, 
    max: $('#cards li').length, 
    value: 1, 
    step: 1, 
    slide: function(event, ui) { 
     if(ui.value > current_index) 
     { 
      next.trigger('click'); 
     } 
     if(ui.value < current_index) 
     { 
      prev.trigger('click'); 
     } 
    } 
}); 

全js文件：

(function($) { 
var counter = 1; 
var newx = 0; 
var newy = 0; 
var width = 475; 
var nwidth = 475; 
var current_index = 1; 
var previous_index = 1; 
var view = $('#rolodex'); 
var prev = $('#control-prev .prev'); 
var next = $('#control-next .next');   

$('#cards li').each(function() 
{ 
    var newz = counter+1000; 

    $(this).css('z-index', newz); 
    //$(this).html(newz); 
    $(this).css('transform', 'translate(' + newx + 'px,' + newy + 'px)'); 

    $(this).css('width', nwidth +'px'); 
    newx = newx + 4; 
    newy = newy + -2; 
    nwidth = nwidth - 8; 
    counter--; 
}); 

$(document).bind('mousewheel', function(event, delta, deltaX, deltaY) 
{ 
    if(deltaY >= 0) { 
     next.trigger('click');   
    } 
    else { 
     prev.trigger('click');   
    } 
});  

next.bind('click', function() { 
    if($(this).attr('disabled')) return false; 
    $('#cards li').filter(':nth-child(' + current_index + ')').css('transform', 'scale(1.2, 1.2)'); 
    $('#cards li').filter(':nth-child(' + current_index + ')').css('opacity', 0); 

    newx = 0; 
    newy = 0; 
    nwidth = 475; 

    $('#cards li').each(function(jindex) { 
     if(current_index <= jindex) 
     { 
      $(this).css('width', nwidth +'px'); 
      $(this).css('transform', 'translate(' + newx + 'px,' + newy + 'px)');    

      nwidth = nwidth - 8; 
      newx = newx + 4; 
      newy = newy + -2; 
     } 
    });      

    current_index ++; 
    $('#slider-vertical').slider({value:current_index});   

    check_buttons(); 
}); 

prev.bind('click', function() { 
    if($(this).attr('disabled')) return false; 

    $('#cards li').filter(':nth-child(' + (current_index - 1) + ')').css('transform', 'scale(1, 1)'); 
    $('#cards li').filter(':nth-child(' + (current_index - 1) + ')').css('opacity', 1);   

    newx = 0; 
    newy = 0; 
    nwidth = 475; 

    $('#cards li').each(function(kindex) {    
     if(current_index <= (kindex + 1)) 
     { 
      $(this).css('width', nwidth +'px'); 
      $(this).css('transform', 'translate(' + newx + 'px,' + newy + 'px)');    

      nwidth = nwidth - 8; 
      newx = newx + 4; 
      newy = newy + -2;    
     } 
    }); 

    current_index --; 
    $('#slider-vertical').slider({value:current_index}); 

    check_buttons();  
}); 

function check_buttons() { 
    if(current_index==1) { 
     prev.attr('disabled', true); 
    } 
    else { 
     prev.attr('disabled', false); 
    } 

    if(current_index == $('#cards li').length) { 
     next.attr('disabled', true);     
    } 
    else { 
     next.attr('disabled', false); 
    } 
} 

$('#rolodex-image').bind('touchstart',function() { 
    $(this).animate({opacity:.70,'z-index':25}); 
    $('#cards').animate({opacity:1}); 
    $('#slider-vertical').fadeIn('slow'); 
    $('#control-prev input').fadeIn('slow'); 
    $('#control-next input').fadeIn('slow'); 
}); 

$('#rolodex-image').bind('click', function() { 
    $(this).animate({opacity:.70,'z-index':25}); 
    $('#cards').animate({opacity:1}); 
    $('#slider-vertical').fadeIn('slow'); 
    $('#control-prev input').fadeIn('slow'); 
    $('#control-next input').fadeIn('slow');   
}); 

$('#slider-vertical').slider({ 
    orientation: 'vertical', 
    range: 'min', 
    min: 1, 
    max: $('#cards li').length, 
    value: 1, 
    step: 1, 
    slide: function(event, ui) { 
     if(ui.value > current_index) 
     { 
      next.trigger('click'); 
     } 
     if(ui.value < current_index) 
     { 
      prev.trigger('click'); 
     } 
    } 
}); 

}）（jQuery的）;

Answer 1

slide當您單擊並在滑塊上跳轉時不處理事件。您應該使用change代替

$('#slider-vertical').slider({ 
    orientation: 'vertical', 
    range: 'min', 
    min: 1, 
    max: $('#cards li').length, 
    value: 1, 
    step: 1, 
    change: function(event, ui) { 
    if(ui.value > current_index) { 
     var index_change = ui.value - current_index; 
     for (var i = 0; i < index_change; i++) { 
     next.trigger('click'); 
     } 
    } 

    if(ui.value < current_index) { 
     var index_change = current_index - ui.value; 
     for (var j = 0; j < index_change; j++) { 
     prev.trigger('click'); 
     } 
    } 
    } 
}); 

我的答案http://jsfiddle.net/mnQfr/13/更新的jsfiddle。