Question

问题是下面的代码需要多用途，所以我可以在我的网站上的其他地方使用它。所以我需要一些抽象帮助。

function change(){
    var showTime = 10000; // time before fade
    var fadeOutDuration = 300;
    var fadeInDuration = 500;
    var textIncrementer = 2;
    AnimateText();

    function AnimateText() {

        setTimeout(function() {
            jQuery("#contactHere").fadeTo(fadeOutDuration, 0, function() {
                if (textIncrementer == 1) {
                    displayText = "Text1";
                }
                if (textIncrementer == 2) {
                    displayText = "Text2";
                }    
                if (textIncrementer == 3) {
                    displayText = "Text3";
                    textIncrementer = 0;
                }
                textIncrementer++;
                jQuery("#contactHere").html(displayText);
                jQuery("#contactHere").fadeTo(fadeInDuration, 1, function(){
                    AnimateText();
                });

            });
        }, showTime);
    }
}

这对于更改文本元素很有效并且工作正常但是如果我想要有两个元素，它将以与文本相同的方式循环它们（隐藏元素，淡入其中，隐藏，淡入淡出）在下一个......），最简单的方法是什么？如果需要，我可以使用PHP。

提前致谢！

Answer 1

有几种方法可以解决这个问题，但这是一个快速解决方案：

var showTime = 2000; // time before fade
var fadeOutDuration = 300;
var fadeInDuration = 500;

StartAnimation($("#contactHere"), [$("#info1"),$("#info2")]);


function StartAnimation(elem, set) {
    var textIncrementer = 0;
    AnimateText(elem, set);

    function AnimateText(elem, set) {
        setTimeout(function () {
            elem.fadeTo(fadeOutDuration, 0, function () {
                var displayText = set[textIncrementer].html();
                textIncrementer = (textIncrementer + 1) % set.length;         
                console.log(elem);
                elem.html(displayText);
                elem.fadeTo(fadeInDuration, 1, function () {
                    AnimateText(elem, set);
                });
            });
        }, showTime);
    }
}

我将AnimateText包装在另一个函数中，以便索引textIncrementer保持私有状态，并且不会被意外覆盖。我还删除了if...else逻辑，而是传入了一个元素数组，并使用索引来选择正确的元素。

这是fiddle

我也刚刚从目标div中复制了html。它可能会让.detach和.append元素本身更有意义。

褪色和改变元素

1 个答案: