Javascript 为拆分的单词添加效果

Javascript 为拆分的单词添加效果,javascript,jquery,Javascript,Jquery,我试图用jQuery为拆分的单词添加一些效果,但我真的不知道如何处理这个问题 我的代码如下所示: $(window).load(function() { var str = $("#animated_text h1").text(); var substr = str.split(' '); $.each(substr, function(index, value) { value.fadeIn();

我试图用jQuery为拆分的单词添加一些效果,但我真的不知道如何处理这个问题

我的代码如下所示:

    $(window).load(function() { 
        var str = $("#animated_text h1").text();
        var substr = str.split(' ');

        $.each(substr, function(index, value) {
            value.fadeIn();
            value.animate({});
        });
    }); 

感谢您的建议

字符串
,您不能在其上应用
fadeIn
动画

您可能想做以下事情:

$('#'+value).fadeIn();
$('#'+value).animate({});
$(window).load(function() { 
  var str = $("#animated_text h1").text();
  var substr = str.split(' ');
  $.each(substr, function(index, value) {
    // you can animate elements, not raw text
    // add your value to an inline element and fade it in
    $('<span>'+value+'</span>').appendTo('body').fadeIn();
  });
});

如果元素id,您可以尝试以下操作:

$('#'+value).fadeIn();
$('#'+value).animate({});
$(window).load(function() { 
  var str = $("#animated_text h1").text();
  var substr = str.split(' ');
  $.each(substr, function(index, value) {
    // you can animate elements, not raw text
    // add your value to an inline element and fade it in
    $('<span>'+value+'</span>').appendTo('body').fadeIn();
  });
});
$(窗口).load(函数(){
var str=$(“#动画#u text h1”).text();
var substr=str.split(“”);
$.each(substr,函数(索引,值){
//可以设置元素的动画,而不是原始文本
//将您的值添加到内联元素并淡入
$(''+value+'').appendTo('body').fadeIn();
});
});

您必须拆分单词并为每个单词创建元素。请在这里找到演示

var str=$(“#动画_text h3”).text();
var substr=str.split(“”);
$(“动画文本h3”).remove();
var-wordCount=0;
$.each(substr,函数(索引,值){
var$word=$(“”+value+“”);
$word.appendTo(“#动画文本”);
$word.delay(索引*100).动画({“字体大小”:“30px”}).动画({“字体大小”:“16px”}),函数(e){
字数++;
if(wordCount==$(“#动画_文本h3”).size(){
$(“#动画_文本”).empty().text(substr.join(“”);
}
});
});

value只是一个字符串,因此它没有jQuery对象。下一步是将值放入span或div对象中,将其附加到某个对象上,然后淡入并设置动画。您所得到的只是元素中包含的文本,而不是元素本身,因此淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入@lgt:将每个单词包装在一个跨距中,然后您就可以按顺序(或其他方式)设置跨距的样式;记住(如果我没记错的话)fadeIn/fadeOut使用
display:block
,这样标题的文本就会被行分开。只需测试一下:-)。jQuery实际上只是在fadeIn上完全剥离display属性。如果它对某个元素进行淡出,它将跟踪显示属性,并恢复为淡出。选中此项: