Дескриптор ползунка ломается при добавлении .animate () - PullRequest
Новая
       16

Дескриптор ползунка ломается при добавлении .animate ()

0 голосов
/ 19 августа 2011

Я пытаюсь построить гистограмму, управляемую ползунком, которая использует данные из массивов. Мне удалось заставить его работать, используя какой-то действительно грязный код здесь , но я сделал намного более чистую версию здесь , которая должна работать, но не работает. На самом деле, он отлично работает, когда захватывает данные из массивов, но он ломается, когда я вставляю код, который оживляет блоки. Затем ползунок перестает двигаться, и ящики анимируются, только если в них есть действительное число (т. Е. Столбец 1). Я могу опубликовать только две ссылки, но вы можете увидеть версию с рабочим ползунком, если переименовать этот файл в laborslider2_noslide.html.

Меня смущает то, что, несмотря на сломанный ползунок, числа передаются в переменные (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>

Так что да. Любая помощь будет отличной. Я в тупике.

Ответы [ 2 ]

1 голос
/ 19 августа 2011

Вы должны определить переменные column1/2/3 в глобальной области видимости, потому что вы устанавливаете их в одной функции и обращаетесь к ней в другой функции.

Я настроил скрипку и исправил ее, посмотрите,Я полагаю, что вы хотите, чтобы анимация блока была параллельной, поэтому я поставил в очередь анимацию блока на false

Рабочая демо

0 голосов
/ 19 августа 2011

Мне кажется, что вы импортируете jQuery ПОСЛЕ вашего собственного скрипта.Это приведет к тому, что оригинальный скрипт не сможет инициализироваться.Это по крайней мере так по ссылке, которую вы предоставили (чистая версия).

...