javascript - 为什么在这个 JavaScript 动画中，某些元素会去到奇怪的地方？

Question

在http://classicorthodoxbible.com/words.html ，我有一个部分损坏的动画；一致的跨浏览器 (Mac) 测试会引发相同的行为。

目的是将 token 移动到随机位置，然后用动画将它们移动到正确的位置；您可以在 http://classicorthodoxbible.com 中以每个字符为基础查看此功能。 ，当前主页。

两者之间的引擎基本相似，位于words.html页面中:

function journey(index, starting_x, starting_y, target_x,
target_y, starting_opacity, target_opacity, delay, radix) {
    if (isNaN(starting_x) || isNaN(starting_y) || isNaN(target_x) || isNaN(target_y)) {
        /* console.log('starting_x: ' + starting_x +
                      ' starting_y: ' + starting_y + ' target_x: ' +
                      target_x + ' target_y: ' + target_y); */
        console.log('Returning...');
        return;
    }
    /* console.log(target_x - starting_x + ', ' + (target_y -
                  starting_y)); */
    if (Math.abs(starting_x - target_x) + Math.abs(starting_y - target_y) < 2) {
        // console.log(index);
        jQuery('#text_' + index).css({
            'left': target_x,
            'top': target_y,
            'opacity': target_opacity,
            '-ms-filter':
                'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + target_opacity * 100,
            'filter': 'alpha(opacity=' + target_opacity * 100,
            'position': 'absolute'
        });
    } else {
        if (starting_x - target_x > 0) {
            var new_x = (target_x + Math.floor((starting_x - target_x) * radix));
        } else {
            var new_x = (target_x + Math.ceil((starting_x - target_x) * radix));
        }
        if (starting_y - target_y > 0) {
            var new_y = (target_y + Math.floor((starting_y - target_y) * radix));
        } else {
            var new_y = (target_y + Math.ceil((starting_y - target_y) * radix));
        }
        var new_opacity = target_opacity + (starting_opacity - target_opacity) * radix;
        jQuery('#text_' + index).css({
            'left': new_x,
            'top': new_y,
            'opacity': new_opacity,
            '-ms-filter':
                'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + new_opacity * 100,
            'filter': 'alpha(opacity=' + new_opacity * 100,
            'position': 'absolute'
        });
        setTimeout(function () {
            journey(index, new_x, new_y, target_x, target_y,
            new_opacity, target_opacity, delay, radix);
        }, delay);
    }
}

function start_fade_in() {
    var message = '<p><a href="http://tinyurl.com/classic-orthodox-bible">The Classic Orthodox Bible</a> is a complete Bible that includes Sir Lancelot Brenton\'s translation of the Septuagint (also known as the LXX), the Greek Old Testament as it was known to Christ and many of the earliest Church Fathers. Missing verses and the New Testament are taken from the <a href="http://tinyurl.com/complete-parallel-bible">King James Version</a>, whose style and quality are imitated by Sir Brenton. His translation is available in tiny, hard-to-read letters in the margins of <a href="http://tinyurl.com/brenton-septuagint">Hendrickson\'s Septuagint</a>, more of a shorthand convenience to scholars reading the Greek than genuinely intended for devotional use. Readers wishing for a complete English translation of the Septuagint in a regular Bible, and who appreciate the beauty, grandeur, and meticulous word-for-word accuracy of the <a href="http://tinyurl.com/complete-parallel-bible">King James Version</a> will find the <a href="http://tinyurl.com/classic-orthodox-bible">Classic Orthodox Bible</a> a delight.</p> <p>If you only buy ONE version of the Bible to help you understand Holy Orthodoxy, without a doubt, buy the <a href="http://tinyurl.com/orthodox-study-bible">Orthodox Study Bible</a>...</p> <p>But if you buy two, as there is good reason to do, you might consider the <a href="http://tinyurl.com/classic-orthodox-bible">Classic Orthodox Bible</a>.</p>';
    var message = '<p><a href="http://tinyurl.com/classic-orthodox-bible">The Classic Orthodox Bible</a> a complete Bible like the <a href="http://tinyurl.com/complete-parallel-bible">King James Version</a> that includes the <a href="http://tinyurl.com/brenton-septuagint">Septuagint</a>, and is completely uncensored.</p> <p>Readers wishing for a complete English translation of Orthodox Bible including the Septuagint in a regular Bible, and who appreciate the beauty, grandeur, and meticulous accuracy of the <a href="http://tinyurl.com/complete-parallel-bible">King James</a> will find it a delight.</p> <p>If you only buy ONE version of the Bible to help you understand Holy Orthodoxy, without a doubt, buy the <a href="http://tinyurl.com/orthodox-study-bible">Orthodox Study Bible</a>...</p> <p>But if you buy two, as there is good reason to do, you might consider the <a href="http://tinyurl.com/classic-orthodox-bible">Classic Orthodox Bible</a>.</p>';
    var split_message = message.split(/(<.*?>|)/);
    var split_message = '<p><a href="http://tinyurl.com/classic-orthodox-bible"><span id="text_0">The</span> <span id="text_1">Classic</span> <span id="text_2">Orthodox</span> <span id="text_3">Bible</span></a> <span id="text_4">a</span> <span id="text_5">complete</span> <span id="text_6">Bible</span> <span id="text_7">like</span> <span id="text_8">the</span> <a href="http://tinyurl.com/complete-parallel-bible"><span id="text_9">King</span> <span id="text_10">James</span> <span id="text_11">Version</span></a> <span id="text_12">that</span> <span id="text_13">includes</span> <span id="text_14">the</span> <a href="http://tinyurl.com/brenton-septuagint"><span id="text_15">Septuagint,</span></a> <span id="text_16">and</span> <span id="text_17">is</span> <span id="text_18">completely</span> <span id="text_19">uncensored.</span></p> <p><span id="text_20">Readers</span> <span id="text_21">wishing</span> <span id="text_22">for</span> <span id="text_23">a</span> <span id="text_24">complete</span> <span id="text_25">English</span> <span id="text_26">translation</span> <span id="text_27">of</span> <span id="text_28">Orthodox</span> <span id="text_29">Bible</span> <span id="text_30">including</span> <span id="text_31">the</span> <span id="text_32"><a href="http://tinyurl.com/brenton-septuagint">Septuagint</span></span> <span id="text_33">in</span> <span id="text_34">a</span> <span id="text_35">regular</span> <span id="text_36">Bible,</span> <span id="text_37">and</span> <span id="text_38">who</span> <span id="text_39">appreciate</span> <span id="text_40">the</span> <span id="text_41">beauty,</span> <span id="text_42">grandeur,</span> <span id="text_43">and</span> <span id="text_44">meticulous</span> <span id="text_45">accuracy</span> <span id="text_46">of</span> <span id="text_47">the</span> <a href="http://tinyurl.com/complete-parallel-bible"><span id="text_48">King</span> <span id="text_49">James</span></a> <span id="text_50">will</span> <span id="text_51">find</span> <span id="text_52">it</span> <span id="text_53">a</span> <span id="text_54">delight.</span></p> <p><span id="text_55">If</span> <span id="text_56">you</span> <span id="text_57">only</span> <span id="text_58">buy</span> <span id="text_59">ONE</span> <span id="text_60">version</span> <span id="text_61">of</span> <span id="text_62">the</span> <span id="text_63">Bible</span> <span id="text_64">to</span> <span id="text_65">help</span> <span id="text_66">you</span> <span id="text_67">understand</span> <span id="text_68">Holy</span> <span id="text_69">Orthodoxy,</span> <span id="text_70">without</span> <span id="text_71">a</span> <span id="text_72">doubt,</span> <span id="text_73">buy</span> <span id="text_74">the</span> <a href="http://tinyurl.com/orthodox-study-bible"><span id="text_75">Orthodox</span> <span id="text_76">Study</span> <span id="text_77">Bible</span></a><span id="text_78">...</span></p> <p><span id="text_79">But</span> <span id="text_80">if</span> <span id="text_81">you</span> <span id="text_82">buy</span> <span id="text_83">two,</span> <span id="text_84">as</span> <span id="text_85">there</span> <span id="text_86">is</a> <span id="text_87">good</span> <span id="text_88">reason</span> <span id="text_89">to</span> <span id="text_90">do,</span> <span id="text_91">you</span> <span id="text_92">might</span> <span id="text_93">consider</span> <span id="text_94">the</span> <a href="http://tinyurl.com/classic-orthodox-bible"><span id="text_94">Classic</span> <span id="text_95">Orthodox</span> <span id="text_96">Bible</span></a><span id="text_97">.</span></p>';
    var counter = 0;
    var filtered_message = '<div class="adjusted">';
    var message = '<p><a href="http://tinyurl.com/classic-orthodox-bible"><span id="text_0">The</span> <span id="text_1">Classic</span> <span id="text_2">Orthodox</span> <span id="text_3">Bible</span></a> <span id="text_4">a</span> <span id="text_5">complete</span> <span id="text_6">Bible</span> <span id="text_7">like</span> <span id="text_8">the</span> <a href="http://tinyurl.com/complete-parallel-bible"><span id="text_9">King</span> <span id="text_10">James</span> <span id="text_11">Version</span></a> <span id="text_12">that</span> <span id="text_13">includes</span> <span id="text_14">the</span> <a href="http://tinyurl.com/brenton-septuagint"><span id="text_15">Septuagint,</span></a> <span id="text_16">and</span> <span id="text_17">is</span> <span id="text_18">completely</span> <span id="text_19">uncensored.</span></p> <p><span id="text_20">Readers</span> <span id="text_21">wishing</span> <span id="text_22">for</span> <span id="text_23">a</span> <span id="text_24">complete</span> <span id="text_25">English</span> <span id="text_26">translation</span> <span id="text_27">of</span> <span id="text_28">Orthodox</span> <span id="text_29">Bible</span> <span id="text_30">including</span> <span id="text_31">the</span> <span id="text_32"><a href="http://tinyurl.com/brenton-septuagint">Septuagint</span></span> <span id="text_33">in</span> <span id="text_34">a</span> <span id="text_35">regular</span> <span id="text_36">Bible,</span> <span id="text_37">and</span> <span id="text_38">who</span> <span id="text_39">appreciate</span> <span id="text_40">the</span> <span id="text_41">beauty,</span> <span id="text_42">grandeur,</span> <span id="text_43">and</span> <span id="text_44">meticulous</span> <span id="text_45">accuracy</span> <span id="text_46">of</span> <span id="text_47">the</span> <a href="http://tinyurl.com/complete-parallel-bible"><span id="text_48">King</span> <span id="text_49">James</span></a> <span id="text_50">will</span> <span id="text_51">find</span> <span id="text_52">it</span> <span id="text_53">a</span> <span id="text_54">delight.</span></p> <p><span id="text_55">If</span> <span id="text_56">you</span> <span id="text_57">only</span> <span id="text_58">buy</span> <span id="text_59">ONE</span> <span id="text_60">version</span> <span id="text_61">of</span> <span id="text_62">the</span> <span id="text_63">Bible</span> <span id="text_64">to</span> <span id="text_65">help</span> <span id="text_66">you</span> <span id="text_67">understand</span> <span id="text_68">Holy</span> <span id="text_69">Orthodoxy,</span> <span id="text_70">without</span> <span id="text_71">a</span> <span id="text_72">doubt,</span> <span id="text_73">buy</span> <span id="text_74">the</span> <a href="http://tinyurl.com/orthodox-study-bible"><span id="text_75">Orthodox</span> <span id="text_76">Study</span> <span id="text_77">Bible</span></a><span id="text_78">...</span></p> <p><span id="text_79">But</span> <span id="text_80">if</span> <span id="text_81">you</span> <span id="text_82">buy</span> <span id="text_83">two,</span> <span id="text_84">as</span> <span id="text_85">there</span> <span id="text_86">is</a> <span id="text_87">good</span> <span id="text_88">reason</span> <span id="text_89">to</span> <span id="text_90">do,</span> <span id="text_91">you</span> <span id="text_92">might</span> <span id="text_93">consider</span> <span id="text_94">the</span> <a href="http://tinyurl.com/classic-orthodox-bible"><span id="text_94">Classic</span> <span id="text_95">Orthodox</span> <span id="text_96">Bible</span></a><span id="text_97">.</span></p>';
    jQuery('.display').html(message);
    var initial_coordinates = [];
    for (var index = 0; index < 100; ++index) {
        if (jQuery('#text_' + index).size()) {
            var coordinates = jQuery('#text_' + index).offset();
            initial_coordinates.push({
                'index': index,
                    'left': coordinates['left'],
                    'top': coordinates['top']
            });
        }
    }
    for (var index = 0; index < initial_coordinates.length; ++index) {
        if (jQuery('#text_' + initial_coordinates[index]['index']).size()) {
            var radius = Math.random() * (jQuery(window).width() + jQuery(window).height());
            var angle = Math.random() * 2 * 3.1415926535;
            var starting_x = (
            initial_coordinates[index]['left'] + Math.cos(angle) * radius);
            // console.log('starting_y: ' + starting_x);
            var starting_y = (
            initial_coordinates[index]['top'] + Math.sin(angle) * radius);
            // console.log('starting_x: ' + starting_y);
            journey(initial_coordinates[index]['index'],
            starting_x, starting_y,
            initial_coordinates[index]['left'],
            initial_coordinates[index]['top'], Math.random(),
            1, 1, .9);
        }
    }
}

start_fade_in();

建议？我在动画之前查看了用于填充 DIV 的最后一个字符串，但我不明白如何设法将最后 5 或 10 个单词发送到与其他 80 或 90 个完全不同的行为。

谢谢

Answer 1

获得错误结束位置的元素是因为它们位于另一个元素内，因此它们的偏移量基于其父元素。

例如#text_86有子元素，但由于它有一个position:absolute并且子元素有一个position:absolute，所以子元素基于父元素的左上角定位，在本例中是#text_86的左上角

您需要将算法考虑在内，将子元素从容器中取出，或者仅移动该元素而不移动子元素