Question

我点击它后点击一条鱼，它会随机移动到容器中。

当我再次点击帖子按钮时，我想要另一条鱼出现并在我的容器上随机移动。在下面的代码中，第二次点击的下一条鱼遵循第一条鱼的相同路径。

是否可以帮助我创建一个通用的动画功能，以便点击每次发布按钮？每条鱼随机移动，不遵循上一条鱼。

注意：如果您有任何疑问，请执行代码并点击发布按钮2到3次。

 <section class="main-content" id="container">
<input type="button" value="Post" class="post-button" /> 
<img src="Assets/Arrow.png" class="right-arrow" alt="arrow" id="rightarrow" /> 
    </section>

   $('.post-button').on('click',function(e){
$('#rightarrow').after('<div class="fishhatch" ></div>');//new fish created
animatenewfish();//animation to move the fish randomly in my container
    });


 /*Animating the fish*/  
     function animatenewfish() {
var Fishv1 = $(".fishhatch"),
theContainer = $("#container"),
maxLeft = theContainer.width() - Fishv1.width()-100,
maxTop = theContainer.height() - Fishv1.height()-100,
leftPos = Math.floor(Math.random() * maxLeft),
topPos = Math.floor(Math.random() * maxTop)+100,
imgRight = "Assets/R1gif.gif",
imgLeft = "Assets/FIsh1.gif";

if (Fishv1.position().left < leftPos) {
    Fishv1.css("background-image",'url("' + imgRight + '")');
}
else {
    Fishv1.css("background-image",'url("' + imgLeft + '")');
}

Fishv1.animate({
    "left": leftPos,
    "top": topPos
}, 18000, animatenewfish);
     }

如何为多个组件创建通用函数？

0 个答案: