javascript - 使用ScrollTop启动JQuery旋钮动画

Question

好吧，所以我一直在努力使用路标将此旋钮加载到ID的顶部，但是这让我很不走运，所以我决定使用scrollTops，是为什么我在元素上滚动时会有原因的原因，刷新并重新执行动画？任何建议表示赞赏，小提琴在这里。 http://jsfiddle.net/J7rdS/

HTML：

  <article id="rowcanvas">
    <section class="c4">
    <div id="knob1">  
    <canvas id="canvas1" >width="180" height="180"> </canvas> 
    <input id="dial1" class="knob" data-width="85%" data-height="85%" data-displayInput=true data-fgColor="#00FFCC" data-thickness= value="29">
</div> <!-- closesknob1 -->
<p class="programs">xxxxxx</p>
</section><!-- c4 -->

JS

$(window).scroll(function(){
        if($(this).scrollTop()<1400){

$(function() {
    $('#dial1').knob({
        min: '0',
        max: '100',
        'thickness': .20,
        readOnly: true
    });

    $({
        value:0
    }).animate({
        value: 75 
    }, {
        duration: 1300,
        easing: 'linear',
        progress: function() {
            $('#dial1')
            .val(Math.round(this.value))
            .trigger('change');
                    }
    });
});

        }});

的CSS

body{
    width:400px;
}

#dial2{
    width:100%;
    margin:0 auto;
}

#row canvas{
    display:inline-block;
    margin: 0 auto;
}

/*knobs them selves */
#knob2{
    margin-bottom:20px;
}
/* space around knobs themselves  adjust this for responsive */
.c4{
    text-align:center;
    width:75%;
    position: relative;
    min-height:1px;
    }

.programs{
    font-family:Arial, Helvetica, sans-serif;
    color:#00FFCC;
    font-size:20px;
    margin-top:5px;
}

#canvas1{
    display: inline-block;

}


#rowcanvas{
    margin-top:900px;
    padding-bottom:400px;
}

谢谢！

Answer 1

不确定您要在这里做什么。

如果您希望输入位于id的顶部，只需将其移到html中即可。

当您到达div＃knob的底部时，是否要使旋钮动画到顶部？

<article id="rowcanvas">
<section class="c4">
<div id="knob1">  
    <input id="dial1" class="knob" data-width="85%" data-height="85%" data-displayInput=true data-fgColor="#00FFCC" data-thickness= value="29">
    <canvas id="canvas1" >width="180" height="180"> </canvas> 

</div> <!-- closesknob1 -->
<p class="programs">xxxxxx</p>
</section><!-- c4 -->