Question

好吧，所以我一直在努力让这个旋钮使用航路点加载到顶部的id，但是这让我没有运气所以我决定使用scrollTops，是否有一个原因当我滚动过去元素，它刷新并重新预先形成动画？任何建议都表示赞赏，Fiddle就在这里。 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 -->

使用ScrollTop启动JQuery Knob动画

1 个答案: