JQUERY 随机多引号旋转器需要调整

Posted 2023-02-24

【中文标题】JQUERY 随机多引号旋转器需要调整

【英文标题】：JQUERY Random Multiple quotes rotator need tweaking

【发布时间】：2012-11-15 18:32:35

【问题描述】：

我正在努力使我的多引号旋转器正常工作。

我有一个 JS fiddle 正在运行 Jsfiddle - Multiple Quote Rotator

jQuery(function()
var quotes1 = [
[ '75', 'Happy Clients' ],
[ '25', 'Emails Typed a day' ],
];

var quotes2 = [
[ '14', 'Coffes a day' ],
[ '1', 'Squeacky Chair' ],
];
var quotes3 = [
[ '70', 'Phone Calls / Day' ],
[ '5', 'Spiders' ],
];
var quotes4 = [
[ '1000', 'Types on the keyboard' ],
[ '100%', 'Qualified Personel' ],
];
var quotes5 = [
[ '55', 'Planes' ],
[ '500', 'Girls' ],
];
var quotes6 = [
[ '160', 'Seo Campaigns running' ],
[ '1', 'Squeacky Chair' ],
];

$('.circle.one').loadText( quotes1, 200); 
$('.circle.two').loadText( quotes2, 400 ); 
$('.circle.three').loadText( quotes3, 600 ); 
$('.circle.four').loadText( quotes4, 800 ); 
$('.circle.five').loadText( quotes5, 1000 ); 
$('.circle.six').loadText( quotes6, 1200 );
);

$.fn.loadText = function( quotes, interval ) 
return this.each( function() 
    var obj = $(this);
    var quote = random_array( quotes );
    var delaytest = delaytest;
    var quote_text = '<p class="facts_h1">' + quote[[0],[0]] + '</p>' + '<p   class="facts_p">' + quote[[0],[1]] + '</p>';

    obj.parent().fadeOut( 'linear', function()  
            obj.empty().html(quote_text );  
            obj.parent().fadeIn(500);
    );

    $("#quote-reload").click( function() 
            if( !obj.is(':animated') )  
                obj.loadText( quotes, interval );
            
    );
);
 
 function random_array( aArray ) 
    var rand = Math.floor( Math.random() * aArray.length + aArray.length );
    var randArray = aArray[ rand - aArray.length ];
    return randArray;
 

我的问题是我希望我的 6 个引号一个接一个出现并带有动画。

我所能做的就是全局淡入淡出...

我说得有道理吗？

【参考方案1】：

与其对每个元素都应用一个函数，不如让一个函数作用于一个元素列表。

查看this question 以获取有关如何执行此操作的演示。

【参考方案2】：

我所能做的就是全局淡入淡出...

这是因为您将fadeIn 和fadeOut 应用于所有.circle 元素的parent() 容器。将淡入淡出动画应用到对象本身。有关详细信息，请参阅以下小提琴：

http://jsfiddle.net/6DFfr/

另外：

使用delay() 交错动画。 使用fadeTo() 代替fadeIn/fadeOut - fadeTo() 仅对不透明度进行动画处理，而fadeIn/fadeOut 也会隐藏元素，从而导致元素位置抖动。

【讨论】：

您好李，感谢您的回复。感谢您提供有关 fadeTo 的提示。它越来越接近我想要的，而且我正在慢慢变得更好。 http://jsfiddle.net/6DFfr/14/我现在主要担心的是它在我的网站上非常有问题，虽然在我的网站上，它一开始运行良好，但我点击的次数越多，它就越滞后....