Question

我正在尝试使用jQuery添加一些效果来分割单词，但我真的不知道如何处理它。

我的代码开始如下：

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

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

感谢您的每一条建议

Answer 1

您可以尝试以下方式：

$(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();
  });
});

Answer 2

您必须拆分单词并为每个单词创建元素。请在此处找到演示http://jsfiddle.net/diode/DLx2A/21/

    var str = $("#animated_text h3").text();
    var substr = str.split(' ');


    $("#animated_text h3").remove();


    var wordCount = 0;

    $.each(substr, function(index, value) {

        var $word = $("<h3>" +  value  + "</h3>");
        $word.appendTo("#animated_text");
        $word.delay(index * 100).animate({"font-size":"30px"}).animate({"font-size":"16px"} , function(e){

            wordCount++;

            if(wordCount == $("#animated_text h3").size()){
               $("#animated_text").empty().text(substr.join(" "));
            }


        });

    });

Answer 3

value为string，您无法对其应用fadeIn或animate。

可能是你想要做的事情：

$('#'+value).fadeIn();
$('#'+value).animate({});

如果值是元素的 id 。

为分裂的单词添加效果

3 个答案: