當添加.animate時，滑塊句柄會中斷（）

我在嘗試構建使用數組中數據的滑塊控制條形圖。我設法使用一些非常雜亂的代碼here工作，但我做了一個更乾淨的版本here應該工作，但沒有。實際上，它可以完美地捕捉數組中的數據，但是當我放入用於動畫框的代碼時，它會中斷。然後滑塊停止移動，並且只有在它們中具有實數的盒子（即，第1列）時，盒子才具有動畫。我只能發佈兩個鏈接，但如果將該文件重命名爲laborslider2_noslide.html，則可以看到帶有工作滑塊的版本。當添加.animate時，滑塊句柄會中斷（）

讓我感到困惑的是，儘管滑動手柄損壞，數字會傳遞給變量（column1，column2和column3），並且帶有實數的框會動畫，但沒有變量框做一件事。我不明白爲什麼會這樣。

我是jquery的新手，所以它可能真的很笨。希望這真的很愚蠢。 ;）

這裏是我的代碼：

<!DOCTYPE html> 
<html class="no-js"> 
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>--> 
    <script type="text/javascript" src="http://img.seiu.org/js/custom-link-tracking.js"></script> 
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js" type="text/javascript"></script> 
<script> 



$(document).ready(function() { 

var updateSizes = function (s) { 

    var column1 = s[0]; 
    var column2 = s[1]; 
    var column3 = s[2]; 


    return "Column 1: " + column1 + ", Column 2: " + column2 + ", Column 3: " + column3; 

}, 
laborData = Array(14); 

laborData[0] = [100, 6, 38]; 
laborData[1] = [300, 6.5, 38.5]; 
laborData[2] = [500, 7, 39]; 
laborData[3] = [6.5, 7.5, 40]; 
laborData[4] = [7, 8, 40.5]; 
laborData[5] = [8, 9, 42]; 
laborData[6] = [8.5, 9.5, 42.5]; 
laborData[7] = [9, 10, 43]; 
laborData[8] = [9.5, 10.5, 44]; 
laborData[9] = [10, 11, 44.5]; 
laborData[10] = [10.5, 11.5, 45]; 
laborData[11] = [11, 12, 46]; 
laborData[12] = [11.5, 12.5, 46.5]; 
laborData[13] = [12, 13, 47]; 



$("#slider").slider({ 
    range: "max", 
    min: 0, 
    max: 13, 
    step: 1, 
    slide: function (event, ui) { 
     $("#amount").val(updateSizes(laborData[ui.value])); 

    $("#box").animate({"height":300}); 
    $("#box2").animate({"height":column2}); 
    $("#box3").animate({"height":column3});  




    } 
}); 


// $("#slider-men").slider({ 
//  range: "max", 
//  min: 0, 
//  max: 13, 
//  step: 1, 
//  slide: function (e, ui) { 
//   $("#amount-men").val(updateSizes(laborData[ui.value])); 
//  } 
// }); 

}); 
</script> 

</head> 
<body> 
<div id="slider"></div> 
<label for="amount">Data:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;width:300px;" /> 

<p> 

<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px; float: left;"> 
</div> 
<div id="box2" style="background:#98bf21;height:100px;width:100px;margin:6px; float: left;"> 
</div> 
<div id="box3" style="background:#98bf21;height:100px;width:100px;margin:6px; float: left;"> 
</div> 



</body> 
</html>

所以，是的。任何幫助都會很棒。我很難過。

來源

2011-08-19 Sariel

您必須在全局範圍內定義column1/2/3變量，因爲您將它設置爲一個函數並在另一個函數中對其進行訪問。

我已經設置了一個小提琴並修復它，看看。我相信你想要的盒子動漫，以平行，所以我已經設置框動畫假

排隊工作demo

來源

2011-08-19 15:18:54 ShankarSangoli

+1，你擊敗了我。 – stealthyninja

@stealthyninja - 下次更好運氣:) – ShankarSangoli

AAsdnsadhkfgfdjsd！當然！哇，這很明顯。 Aaahaha，謝謝！現在想出如何使它向上生動。 – Sariel

在我看來，你正在導入jQuery AFTER你自己的腳本。這將導致原始腳本無法初始化。至少在您提供的鏈接（乾淨版本）中就是這種情況。

來源

2011-08-19 15:03:40 Exelian

我不知道，我明白了。在所有jquery源被調用後，該腳本嵌入在頁面中。無論哪種方式，我擺脫了無關的腳本，它仍然沒有工作。我錯過了什麼嗎？ – Sariel

我主要看着我的Firebug日誌，它給了我獨特的警告「$未定義」，這通常表明進口訂單是錯誤的。當我回家時我會研究它。 – Exelian

當添加.animate時，滑塊句柄會中斷（）

回答

相關問題