Question

这是我的JSFIDDLE

当你将图像悬停在我的文字上时，我有动画。

但我想对这些文本（h1）施加更多效果。

我在JSFIDDLE上向您展示了一个示例，其中包含“我想要的内容”（您必须重新加载页面以查看效果）

我想在其他h1文本上应用“我想要的”文本的效果。（01-One，02-Two和03-3）

但它不起作用。

JQUERY：

$('h1').lettering();

$('h1').children().each(function(i){
  var letter = $(this);
  setTimeout(function(){
    //alert('yo');
    letter.addClass('fadeBounceIn')
  }, i*50)
});

Answer 1

查看我制作的jsFiddle。我认为这与你想要做的非常接近。

问题在于，只有页面加载时，您只会出现一次bounce-in刻字效果。因此，所有h1的动画都很好，但滚动时它们不会再动画。

我只是把这段代码放到一个像这样的函数中：

var lettering = function() {
$('h1').lettering();
$('h1').children().each(function(i){
  var letter = $(this);
  setTimeout(function(){
    //alert('yo');
    letter.addClass('fadeBounceIn')
  }, i*50)
});
}

然后在你的滚动函数内部，我只是添加了对我创建的lettering()函数的调用。

最后，我假设您仍然希望它在页面加载时发生，所以我只是添加了这个：

$(document).ready(function() {
lettering();
});

将在初始页面加载时调用该函数。

您可能需要稍微调整一下才能获得特定的效果。

使用css和jQuery创建动画字母

1 个答案: