Question

我正在构建休闲点击游戏，我在这里遇到了一些问题！我想这样做，无论何时应用点击，然后项目（图像）“生成”，并使用animate marginTop向下更改位置！

事情是，当点击是强烈的（它应该是怎样）时，它会在同一个div中生成2个项目并且前一个项目开始继续计算边缘顶部，从最新的div元素开始，这使得更长的动画距离比它应该更长是的！

部分代码有问题的代码：

$("#guitar").click(function(){
    notes=notes+click;
    $.when($(".string:nth-child("+noteposition+")").prepend("<img class='note'  src='imgs/note.PNG' style='width:100%; overflow:hidden;'>")).then(function(){
        $(".note:first-child").fadeIn("fast",function(){
            $(this).animate({marginTop: ""+(($("#griff").height())-($(this).height()))+"px"}, 3000,function(){
                $(this).remove();
            });
        })
        if(limit==1){
            if(noteposition==5){
                limit=2;
                noteposition=noteposition-1;
            }
            noteposition++;
        }
        else if(limit==2){
            if(noteposition==1){
                limit=1;
                noteposition=noteposition+1;
            }
            noteposition--;
        }
    });
    // $("#note").fadeIn("fast");
    // $("#note").animate({marginTop: "1000px"}, "fast", function(){
    //  $("#note").fadeOut("fast", function(){
    //      $("#note").css("margin-top", "0px");
    //  });
    // });
    $("#melodies").html(notes+" Notes !");
    $("#learn-train > .learn").each(function(){
        if(notes>$(this).attr("data-cost")){
            $(this).slideDown(function(){
                $(this).css("display", "");
            });
        }
    });
    $("#upgrade > .upgrade-music").each(function(){
        if(notes>$(this).attr("data-cost")){
            $(this).slideDown(function(){
                $(this).css("display", "");
            });
        }
    });
});

这是HTML：<div id='contain' style=' margin-left:20px; overflow:auto;'> <div id='left' style='background-color:#CE8964; width:13%; height:100%; float:left; border:2px solid red; display:block;'> <div style='float:left; margin-top: 40px;' id='melodies-cont'> <div id='melodies'> </div> <div id='worth'> </div> <div id='automatic'> </div> </div> </div> <div id='center' style='background-color:#CE8964; width:70%;margin-left: 10px; height:100%; float:left; border:2px solid red; display:block;'> <center> <div id='headlines'> <div id='slider' style='display:none;'></div> </div> <div> <div id='griff'> <div class='string'> </div> <div class='string'> </div> <div class='string'> </div> <div class='string'> </div> <div class='string'> </div> </div> <div style='display:inline-block; width:30%; height:30%; float:left;'> <img id='guitar' style="width:100%; height:100%; margin-top: 140px; cursor:pointer;" src="imgs/guitar.png"> </div> </div> </center> </div> <div id='right' style='background-color:#CE8964; border:2px solid red; height:100%; float:left;margin-left: 10px; display:block; width:13%;' > <div style='margin-top: 40px;' id='learn-train'> <div id='l1' style=' height:80px; width:100%; margin-top: 20px;'>Learn</div> <div class='learn' style='display:none;' data-cost='10' data-text='Coolio first steps !' data-add='1'> 10 notes !Learn string names +1 notes per click</div> <div class='learn' style='display:none;' data-cost='40' data-text='Now You know some basis !!' data-add='2'>40 notes ! Learn basic chords +2 notes per click</div> <div class='learn' style='display:none;' data-cost='400' data-text='Damn Ur first song ! !' data-add='1'> 400 notes !Learn your first song +3 notes per click</div> <div class='learn' style='display:none;' data-cost='3000' data-text='Nice, keep it up man!!' data-add='2'>3000 notes ! Learn bared chords +4 notes per click</div> </div> <div id='upgrade' style='margin-top:20px;'> <div style='border:2px solid red; height:80px; width:100%; margin-top: 10px;'>Upgrades</div> <div class='upgrade-music' data-cost='100' data-add="1" data-text='Nice, you got a capo !!' style=' display:none;border:2px solid red; height:80px; width:100%; margin-top: 10px;'>100 notes ! Buy Capo 1 note per 10 sec </div> <div class='upgrade-music' data-cost='400' data-add="5" data-text='Its all about that timing !' style=' display:none;border:2px solid red; height:80px; width:100%; margin-top: 10px;'>400 notes ! Buy metronome 5 notes per 10 sec</div> <div class='upgrade-music' data-cost='1000' data-add="10" data-text='Now you can produce some quality music !' style=' display:none;border:2px solid red; height:80px; width:100%; margin-top: 10px;'>1000 notes ! Buy Fruity loop 10 note per 10 sec </div> <div class='upgrade-music' data-cost='4000' data-add="30" data-text='Time to go electronic !!!' style=' display:none;border:2px solid red; height:80px; width:100%; margin-top: 10px;'>4000 notes ! Buy electric Guitar 30 notes per 10 sec</div> </div> </div> </div> 屏幕上限问题：

它应该如何：

我很感激帮助

保证金顶部为多个项目设置动画

0 个答案: