jquery - 在 Jquery 中循环 div 内容 Upwords 喜欢(最新消息)得到错误

Question

嗨，我是 JQuery 的新手，我有一些动态附加到 div 的内容，需要将该 div 内容滚动到顶部，我已经检查并发现它符合我的要求

这是我的html请看

 <div class="news_container" id="NewsContent">
            <div class="LatestNews">
                <div class="Content">
                     with desktop publishing software like Aldus PageMaker            includingversions of Lorem
                    Ipsum.
                </div>
            </div>
        </div>

http://jsfiddle.net/x47Te/3/

示例 fiddler 它在这里工作正常 来到 asp.net 页面，它引发 Error Like

    "TypeError: jQuery.speed is not a function
optall = jQuery.speed( speed, easing, callback ),   
" 

我不知道我在这里用 animate() 函数做错了什么

 function CreateFunction() {

            $.fn.loopScroll = function () {
                var options = $.extend({
                    direction: "upwards",
                    speed: 50
                });

                var obj = $(this).find(".LatestNews");
                var text_height = obj.find(".Content").height();
                var start_y, end_y;
                if (options.direction == "upwards") {
                    start_y = 0;
                    end_y = -text_height;
                }               
                var animate = function () {
                    //setup animation of "obj"
                    // calculate distance of animation    
                    var distance = Math.abs(end_y - parseInt(obj.css("top")));
                    //duration will be distance / speed

                    obj.animate({top: end_y }, 1000 * distance / options.speed,
                    //scroll upwards
                     function () {
                        // scroll to start position
                        obj.css("top", start_y);
                        animate();
                    });
                       animate();
                };
            $("#NewsContent").loopScroll({ speed: 120 });
        }

我无法理解 optionl 参数，任何人都可以建议我解决什么问题提前致谢

Answer 1

实际上你的问题是你没有在你的插件中扩展选项

$.fn.loopScroll = function (p_options) { // p_options missed
    var options = $.extend({
          direction: "upwards",
          speed: 50
      }, p_options);// extend p_options missed

你错过了 $.fn.loopScroll = 的右大括号试试这个，

function CreateFunction() {
    $.fn.loopScroll = function (p_options) {
        var options = $.extend({
            direction: "upwards",
            speed: 50
        },p_options);

        var obj = $(this).find(".LatestNews");
        var text_height = obj.find(".Content").height();
        var start_y, end_y;
        if (options.direction == "upwards") {
            start_y = 0;
            end_y = -text_height;
        }
        var animate = function () {
            //setup animation of "obj"
            // calculate distance of animation    
            var distance = Math.abs(end_y - parseInt(obj.css("top")));
            //duration will be distance / speed

            obj.animate({
                top: end_y
            }, 1000 * distance / options.speed,
            //scroll upwards
            function () {
                // scroll to start position
                obj.css("top", start_y);
                animate();
            });

        };
    }// you've missed the closing brace
    $("#NewsContent").loopScroll({
       speed: 120
    });        
}

或者，你也可以试试，

<script src="path/to/jquery.js"></script>
<script>
    ;(function ($) {
        $.fn.loopScroll = function (p_options) { // get new options
            var options = $.extend({
                direction: "upwards",
                speed: 50
            }, p_options); // extend options
            var obj = $(this).find(".LatestNews");
            var text_height = obj.find(".Content").height();
            var start_y, end_y;
            if (options.direction == "upwards") {
                start_y = 0;
                end_y = -text_height;
            }

            var animate = function () {
                //setup animation of "obj"
                // calculate distance of animation    
                var distance = Math.abs(end_y - parseInt(obj.css("top")));
                //duration will be distance / speed

                obj.animate({
                    top: end_y
                }, 1000 * distance / options.speed,
                //scroll upwards
                function () {
                    // scroll to start position
                    obj.css("top", start_y);
                    animate();
                });

            };

            obj.find(".Content").clone().appendTo(obj);
            $(this).on("mouseover", function () {
                obj.stop();
            }).on("mouseout", function () {
                animate(); // resume animation
            });
            obj.css("top", start_y);

            animate(); // start animatio
        } // in your code you missed the closing braces.
    }(jQuery));

    function CreateFunction() {
         $("#NewsContent").loopScroll({ speed: 120 });
    }
</script>