jQuery的動畫滑塊

Question

我有http://jsfiddle.net/aXVFR/

滑塊當我點擊所有的圖像應該旋轉項目。點擊一下就可以正常工作。下一個不太好。我寫了console.log並查找歷史數據的重複內容。它應該每次都改變，但不改變。

任何想法？

Answer 1

確定後，看看爲什麼圖像沒有旋轉每一次點擊圓我決定簡化你的代碼一點。你不應該真的需要重置任何值，就像你用reset_history（）函數所做的那樣，如果你把它們存儲在數組中的話，你可以這樣做。

你真正需要的是跟蹤當前朝前項變量，您可以在使用中做一個快速的計算與和「指數」獲得必要的「一步」你需要的值各有功能。

下面是編輯的代碼：

jQuery(document).ready(function($) { 
    var side_item_count = 2; 
    // ADDED CURRENT ITEM VAR 
    var currItem = 1; 
    var item_count = $("#showcase li").size(); 
    var history_width = get_history_width(); 
    var history_height = get_history_height(); 
    var history_margin = get_history_css("margin"); 
    var history_zindex = get_history_css("zindex"); 

    console.log(history_width); 
    console.log(history_height); 
    console.log(history_margin); 

    // REMOVED get_next_index() THROUGHOUT TO SIMPLIFY SPECIFIC CALCULATIONS 
    $("#showcase li").live("click", function(){ 
     if(currItem == item_count){ 
      currItem = 1; 
     }else{ 
      currItem++; 
     } 
     step_loop(currItem); 
    }); 

    function step_loop(this_index) { 
     $('#showcase li').each(function(index) { 
      counter = index + 1; 
      step_animate(this_index, counter); 
     }); 
    } 

    function step_animate(current_index, counter) { 
     // NEW CALCULATION USING currItem TO WORKOUT NEW ITEM POSITION 
     current_object = $('#showcase li:nth-child(' + counter + ')'); 
     next_index = counter + 1 - currItem; 
     if((counter - currItem) < 0){ 
      next_index = (counter - currItem) + item_count + 1; 
      console.log("-- " + next_index); 
     }else{ 
      console.log(counter + " + 1 - " + currItem + " = " + next_index); 
     } 

     // ADDED NEW VAR next_zindex 
     var next_width = history_width[next_index]; 
     var next_height = history_height[next_index]; 
     var next_margin = history_margin[next_index]; 
     var next_zindex = history_zindex[next_index]; 

     // ADDED ZINDEX CHANGE BEFORE ANIMATION 
     $(current_object).css("zIndex", next_zindex).animate({ 
      marginLeft: next_margin, 
      width: next_width, 
      height: next_height, 
      }, 500, function() { 
       // Animation complete. 
     }); 
    } 

    function get_history_width() { 
     var width = new Array(); 
     $('#showcase li').each(function(index) { 
      counter = index + 1; 
      width[counter] = $('#showcase li:nth-child(' + counter + ')').css('width'); 
     }); 
     return width; 
    } 
    function get_history_height() { 
     var height = new Array(); 
     $('#showcase li').each(function(index) { 
      counter = index + 1; 
      height[counter] = $('#showcase li:nth-child(' + counter + ')').css('height'); 
     }); 
     return height; 
    } 

    // CHANGED get_history_margin TO SERVE ZINDEX VALUES AS WELL 
    function get_history_css(property) { 
     var margin = new Array(); 
     var zindex = new Array(); 
     $('#showcase li').each(function(index) { 
      counter = index + 1; 
      margin[counter] = $('#showcase li:nth-child(' + counter + ')').css('marginLeft'); 
      zindex[counter] = $('#showcase li:nth-child(' + counter + ')').css('zIndex'); 
     }); 
     switch(property){ 
      case "margin": 
       return margin; 
       break; 
      case "zindex": 
       return zindex; 
       break; 
     } 
    } 
}); 

這裏是的jsfiddle的活生生的例子：http://jsfiddle.net/aXVFR/3/

您可以在更新的jsfiddle通知，我做了一些更改CSS。這只是爲了能夠看到更多關於元素的內容。

我希望這是有幫助的，不要太離開你的原始代碼！