Question

我有一系列块落下，当它们到达某一点时，会出现一个灰色块（灰尘的占位符）;如果块反弹超过某个点，它会消失，然后当块再次下降时重新出现，每次冲击发生时都会变小。

然而，目前，由于灰色块的类受到影响，所以任何下降块都会影响“灰尘”块的整体大小，尽管在不同时间下降和击中。我想分别跟踪每个灰尘块，因此每个灰尘块都会根据颜色块与地面撞击的关系而改变。

我尝试过使用ID - id ='smoke“+ i +”'，$（“＃smoke”+ i）。高度（40 + smokeGlobal）; - 而不是单个类，但它似乎只允许第一个块动画。（我假设在那里需要一个“for”循环，但是添加它似乎完全取消了尘埃块。）

一如既往，我们将不胜感激。感谢。

http://jsfiddle.net/pjhoL899/1/

JS：

var links = ["#portfolio", "#hamumu", "#beep", "#jk"];
var linkGlobal;
smokeGlobal = 0;

//home page functions
$(document).ready(function homePage() {

    //check collisions
    //initial animation
    for (var i=0; i<links.length; i++) {
        //animate links
        $(links[i]).animate({
            top: '0'
        }, { 
            duration: 2000*(Math.random()*(2)+1), 
            easing: 'easeOutBounce',
            step: function(y) {
                if (y >= -2) {
                    smokeGlobal -= 2;
                    linkGlobal = $(this);
                    linkGlobal.html("<div class='smoke' id='smoke"+i+"'></div>");
                    $(".smoke").height(40+smokeGlobal);
                    $(".smoke").fadeTo("fast", 0);
                }

            }, complete: setTimeout(function() {
                   linkGlobal.html("");
            }, 2000)
        });
    } 
})

Answer 1

修改，更新

now代替y，$(tween.elem)代替$(this) step函数。 step函数参数tween是jquery .animate()中的一个对象;具有多个属性，包括当前的动画元素（elem）; easing; now; options - 也有queue属性（请参阅.queue()）。

对于集合links中的每个元素，可以使用tween对象检索当前的动画属性，以及start和end之间元素的动画位置动画的财产。

在原始帖子中，y实际上可以用作now参数;和$(this) linkGlobal。 tween对象应该允许访问所需动画的特定部分的动画元素;用于调整元素，动画，回调。

要分别跟踪每个灰尘块，可以通过.fadeTo()回调访问该元素，或使用done回调来调整效果; done在complete之前触发done。 promise也有.animate()，可用于调整下一个动画元素。可能有几种可用的选项可以使用var links = ["#portfolio", "#hamumu", "#beep", "#jk"]; var linkGlobal; smokeGlobal = 0; //home page functions $(document).ready(function homePage() { //check collisions //initial animation for (var i=0; i<links.length; i++) { //animate links $(links[i]).animate({ top: '0' }, { duration: 2000*(Math.random()*(2)+1), easing: 'easeOutBounce', step: function(now, tween) { console.log(now, tween); // substituted `now` for `y` if (now >= -2) { smokeGlobal -= 2; // substituted `$(tween.elem)` for `$(this)` linkGlobal = $(tween.elem); linkGlobal.html("<div class='smoke' id='smoke"+i+"'></div>"); // adjust "dust" colors , // from checking `tween.elem` `backgroundColor` , `now` var color = linkGlobal.css("background-color"); $(".smoke").eq(0) .css("background-color" , color === "yellow" && now < -1.05 ? "purple" : "orange"); $(".smoke").eq(1) .css("background-color" , color === "purple" && now < -0.00025 ? "orange" : "pink"); $(".smoke").eq(2) .css("background-color" , color === "pink" && now >= -0.0075 ? "purple" : "yellow"); $(".smoke").eq(3) .css("background-color" , color === "orange" && now < -0.003 ? "pink" : "purple"); // alert(now); $(".smoke").height(40+smokeGlobal); $(".smoke").fadeTo("fast", 0); } }, complete: setTimeout(function() { linkGlobal.html(""); }, 2000) }); } });调整功能。

尝试（此模式）

{{1}}

jsfiddle http://jsfiddle.net/guest271314/pjhoL899/10/

在.animated＃39; s阶段函数中保持id属性的单独跟踪？

1 个答案: