animation - 使用 Waypoint 启动 Jquery 动画

Question

我正在使用 Jquery Knob，它会在页面加载时自动运行。我似乎无法弄清楚在这个函数中在哪里插入 Waypoint 调用。任何建议都非常感谢。

            <script>
                 $(document)(function () {
                    $('.dial').knob({
                        min: '0',
                        max: '100',
                        readOnly: true
                    });

                    $('.dial').each(function(){
                        $(this).animate({
                            value: $(this).data('number')
                        },{
                            duration: 950,
                            easing: 'swing',
                            progress: function () {
                                $(this).val(Math.round(this.value)).trigger('change');
                            } // progress:function
                        }); // middle
                    }); //dial.each.function
                }); // function
                </script>

Answer 1

以下应该工作。

$(document)(function () {
    $('.thing').waypoint(function(direction) {  // Change ".thing" to the div class containing your knobs //
        $('.dial').knob({
           min: '0',
           max: '100',
           readOnly: true
         });

    $('.dial').each(function(){
        $(this).animate({
        value: $(this).data('number')
        },{
            duration: 950,
            easing: 'swing',
            progress: function () {
            $(this).val(Math.round(this.value)).trigger('change');
            } // progress:function
            }); // middle
        }); //dial.each.function
    });
}); // function