小编Sup*_*nzi的帖子

我目前正在尝试学习JavaScript并尝试很多东西,但就目前而言,我的JS skilly仍然非常有限.我创建了一个小游戏,其中有一个随机出现的兔子头盒子,用户必须尽快点击它们.

所以我用间隔动画创建了兔子,兔子关闭并在每2秒内睁开眼睛.现在我觉得有点愚蠢,但我无法让动画像我想要的那样工作.现在,兔子每2秒钟闭上眼睛,然后每隔2秒再打开一次.但是,我希望它只是眨眼,这意味着眼睛应该暂时关闭然后再打开,这样兔子每2秒闪烁一次.然后我还希望它有时会偶尔闪烁一次,有时会眨眼两次.不确定这是不是很容易,我只是盲目地编码和学习新东西,但似乎我可能需要你的帮助.

这是现在整个事情的小提琴.

您可以看到小提琴内部使用的完整代码.我不想在代码部分发布整个网站,但我认为我的动画部分感兴趣.

这是眨眼睛的js代码:

var eyeleft = document.getElementById("eyeleft");
var eyeright = document.getElementById("eyeright");

window.onload = setInterval(function() {
    eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft');
    eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright');
    }, 2000);

接下来是HTML

<div id="shape" class="game-shapes">
    <div class="ears left"></div>
    <div class="ears right"></div>
    <div id="eyeleft" class="eyeleft"></div>
    <div id="eyeright" class="eyeright"></div>
    <div id="mouth">
        <div id="tooth"></div>
        <div id="tongue"></div>
    </div>
</div>

现在CSS

.game-shapes {
  height: 80px;
  width: 80px;
  cursor: pointer;
  opacity: 0;
  position: relative;
  transition: opacity …

我目前正在基于我在SO上找到的脚本为网站进行简单的拉出.现在我想为现有函数添加背景覆盖,但我不知道如何以及在何处调用它.

这是拉出的小提琴.

http://jsfiddle.net/hr9bymj1/

这就是功能

 $(function () {
   $("#clickme").click(function () {
        if ($(this).parent().hasClass("popped")) {
            $(this).parent().animate({
                left: '-400px'
            }, {
                queue: false,
                duration: 500
            }).removeClass("popped");

        } else {
            $(this).parent().animate({
                left: "0px"
            }, {
                queue: false,
                duration: 500
            }).addClass("popped");
        }
    });
});

我已经尝试了一些在互联网上找到的方法,但是我无法将click事件与append div结合起来,所以我陷入困境并试图在这里寻求帮助.

谢谢!