j查询重新加载函数

jQuery reload function

本文关键字：加载 函数 查询 新加载      更新时间：2023-09-26

这是我想要实现的目标：

  • 滚动选框内容（长度灵活）从屏幕的右到左完成完整的旅程
  • 一旦它从屏幕上消失，调出一些通用消息
  • 在一般消息期间在后台检查是否有任何新的滚动内容并加载它
  • 仅当通用消息显示完毕后，才再次开始滚动（如果有新内容），否则重复通用消息

http://jsfiddle.net/Vbmm5/

(function($) {
    $.fn.marquee = function(options) {
        return this.each(function() {
            var o = $.extend({}, $.fn.marquee.defaults, options),
                $this = $(this),
                $marqueeWrapper,
                containerWidth,
                animationCss,
                elWidth;
            o = $.extend({}, o, $this.data());
            o.gap = o.duplicated ? o.gap : 0;
            $this.wrapInner('<div class="js-marquee"></div>');
            var $el = $this.find('.js-marquee').css({
                'margin-right': o.gap, 
                'float':'left'
            });
            if(o.duplicated) {
                $el.clone().appendTo($this);
            }
            $this.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>');
            elWidth = $this.find('.js-marquee:first').width() + o.gap;
            $marqueeWrapper = $this.find('.js-marquee-wrapper');
            containerWidth = $this.width();
            o.speed = ((parseInt(elWidth,10) + parseInt(containerWidth,10)) / parseInt(containerWidth,10)) * o.speed;
            var animate = function() {
                if(!o.duplicated) {
                    $marqueeWrapper.css('margin-left', o.direction == 'left' ? containerWidth : '-' + elWidth + 'px');
                    animationCss = { 'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : containerWidth };
                }
                else {
                    $marqueeWrapper.css('margin-left', o.direction == 'left' ? 0 : '-' + elWidth + 'px');
                    animationCss = { 'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : 0 };
                }
                $marqueeWrapper.animate(animationCss, o.speed , 'linear', function(){
                    getUpdates();
                });
            };
            setTimeout(animate, o.delayBeforeStart);
        });
    };
})(jQuery);
$(function(){
    $('#scrollerContent').marquee({
        speed: 3000,
        gap: 50,
        delayBeforeStart: 0,
        direction: 'right',
        duplicated: false,
        pauseOnHover: false,
    });
});
function getUpdates()
{
    alert("Hello"); // This is where the jQuery get function would be to update the text
    alert("Show Details"); // This is where the generic details would be displayed
    marquee();
}

问题是滚动元素需要一个宽度，它显然会随着每个新的消息"加载"而变化。我尝试将getUpdates（）函数放在主jQuery函数中，该函数几乎可以完美地工作，但不会更新containerWidth变量，因此消息比原始开始的要长，而较短的消息需要很长时间才能出现。

我需要的是重新

运行整个函数，包括在更改 #scrollerText 段落后重新设置宽度。

我该怎么做？

如果您使用的是console.log()而不是alert()，您将打开控制台并看到

Uncaught ReferenceError: marquee is not defined

在getUpdates()中，您正在调用不存在的函数marquee();。脚本到此终止。

返回几个步骤（撤消已删除的内容）以及代码触发动画的位置，添加代码以在此之前更新文本，或者如果您要获取数据，则需要包装该代码。

因此，如果您从服务器获取数据，url.php 将返回文本新文本，而不会返回其他任何内容。在 $.get 回调函数中移动触发动画的代码以再次移动。

http://jsfiddle.net/Vbmm5/4/

$marqueeWrapper.animate(animationCss, o.speed , 'linear', function(){
    // clear the text to prevent it from hanging at the end of the 
    // marquee while the script gets new data from the server 
    $this.find('#scrollerText').text('');
    // get new text
    $.get('theurl.php', function(response){
        $this.find('#scrollerText').text(response);
        // update the width
        elWidth = $this.find('.js-marquee:first').width(); 
        //fire event
        $this.trigger('finished');
        //animate again
        if(o.pauseOnCycle) {
            setTimeout(animate, o.delayBeforeStart);
        }
        else {
            animate();
        }
    });
});

（jsfiddle 示例中的 URL 和 post 数据是 jsfiddle 返回 html 的方式）

我已经使用了$this.find('#scrollerText').text(response);，即使应该只有一个id，$('#scrollerText').text(response);就可以了。如果你有多个选框，你会使用 $this.find 来定位每个选框的文本，所以如果你想要多个使用类而不是$this.find('.scrollerText').text(response);

相关文章：