Question

我的Wordpress网站有一个加载动画，可以在页面加载时隐藏内容，然后逐项显示任何具有类＆＃34; typewrite＆＃34;的元素。

至少它是在我制作网站的时候做的，但在过去的一两年里它已经停止了工作。我在Chrome中查看它。似乎有些元素会显示一段时间，然后在动画制作之前隐藏起来。

您可以在http://www.edwinbradford.com/portfolio看到问题。主页，投资组合和关于部分都有问题，并且都使用相同的动画脚本。

任何人都可以看到错误是什么，并解释为什么它现在的行为方式有所不同，但没有任何改变？

jQuery('.typewrite').fadeTo(0, 0).each(function(index){
            var self = this;
            setTimeout(function () {
                jQuery(self).fadeTo(250, 1);
            }, index * 100);
});

Answer 1

我建议：

jQuery('.typewrite').css('opacity', 0).each(function(index, element){
    jQuery(element).delay(index * 100).fadeTo(250, 1);
});

这会将初始不透明度初始化为0，然后循环显示每个.typewrite元素，并在开始短fade()之前设置变量时间。

Answer 2

问题是最初的.fadeTo()电话。如果我没记错的话，像这样的黑客对于旧版本的jQuery是常见的，因为隐藏/显示/动画相关的功能。问题是如果初始属性是在style标签或外部工作表中设置的，则效果不能正常工作;你必须直接在元素的style属性上设置它们，这个属性不太理想，所以很多时候你要通过调用你要运行的函数来设置元素到JS初始状态或使用.css()来执行此操作。

此问题早已解决，因此这里正确的更改是删除初始.fadeTo()并只设置CSS中元素的初始状态。大概你想要同时做display和opacity属性：

.typewrite {
    display: none;
    opacity: 0;
}

然后你修改的JS将是：

    jQuery('.typewrite').each(function(index){
        var self = this;
        setTimeout(function () {
            jQuery(self).fadeTo(250, 1);
        }, index * 100);
    });

为什么.fadeTo（）。each（）停止工作？

2 个答案: