Question

你好，我目前正在学习CSS，jQuery，Javascript，并且已经将一个蚀刻草图作为第一个项目。我已经成功地设置了一些功能，看起来没有任何问题，但是对于蛇功能我有一个问题，如果你打了一个正方形的鼠标，它似乎移动到网格的底部并继续这样做，我认为这是由于网格的生成方式或div的浮动，但我无法解决问题。有人可以建议任何方法来解决这个问题吗？我真的很感激你，如果你在代码中看到任何可以改进的东西，请告诉我，因为我刚开始学习之旅！

该项目可在此处查看http://htmlpreview.github.io/?https://github.com/timmknight/etch-a-sketch/blob/master/index.html

并且文件位于https://github.com/timmknight/etch-a-sketch

的github上

提前感谢您的帮助！

Answer 1

问题似乎在于此功能的最后一行：

function trail(){
  clearGrid()
  $('.square').css("background-color", "#CFCFCF")
  $('.square').hover(function () {
    $(this).css("background-color", "#CFCFCF")
    $(this).fadeToggle("slow") // this line is the issue
  });
}

fadeToggle正在减少目标超时的不透明度。一旦不透明度达到0，目标的显示就会设置为＆＃34;无＆＃34;。因此，在20x20的网格中，而不是显示400个元素，每次你的悬停导致元素隐藏时，它会显示399。总而言之，没有任何东西移动到底部，你的悬停导致所有元素在网格中向左移动，最后留下一个空白区域。

我希望这会有所帮助。

我的第一个项目上的jQuery / CSS定位蚀刻草图

1 个答案: