使用ScrollTop來啓動JQuery旋鈕動畫

好的，所以我一直在努力讓這個旋鈕加載在使用航點的ID頂部，但這使我沒有運氣，所以我決定使用scrollTops，是否有爲什麼當我滾動瀏覽元素時，它會刷新並重新執行動畫？任何建議表示讚賞，小提琴在這裏。 http://jsfiddle.net/J7rdS/使用ScrollTop來啓動JQuery旋鈕動畫

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 -->

$(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; 
}

的感謝！

來源

2014-02-22 knocked loose

不知道你想在這裏做什麼。

如果您希望輸入在id的頂部，只需在html中移動它即可。

當您到達div＃旋鈕的底部時，是否要旋鈕爲頂部設置動畫？

<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 -->

來源

2014-02-22 15:08:01 hyperdrive

我在我的頁面底部設置了我的撥號盤，但不希望它們在加載時進行動畫製作。我希望動畫發生在ID爲「rowcanvas」的頂部。但是，當我進入滾動頂部時，一旦滾動過去，只要鼠標滾輪移動，就會重新加載動畫。 –

使用ScrollTop來啓動JQuery旋鈕動畫

回答

相關問題