Jquery 隐藏和显示动画取消

Question

首先：

• 我正在尝试创建一个"连接4"游戏
• #send是一个按钮 id="发送" html

问题是，当我启动网页
时，.grid被隐藏了，但是当我单击
#send按钮时，show()动画执行了 0.5
，然后消失了......

起初我以为问题出在 .ready(( 函数上，但我错了。

寻找一些提示。
刚从jQuery开始。

$.fn.puissance4 = function(x,y) {
$(document).ready(() => {
var color_count = 0;
// $(document).on('click', function(){
//  $('body').show('.grid')
// })
// Genere le container     
$('body').append('<div class="grid"></div>');
$('.grid').css('width', (100*x)+10+'px' );
$('.grid').hide();
$('#send').click(function(){
$('.grid').slideDown(); 
})              
//Genere la grille    
for (var i = 1; i <= x; i++) {
$('.grid').append('<div class="rowe'+i+'"></div>');
for (var j = 1; j <= y; j++) {
$('.rowe'+i).append('<div class="cell" id="cell'+i+'-'+j+'" ></div>');    
}
}    
//PLacement Jetons &&  Previsualisation    
$(document).on('click', '.cell', function () {
if (color_count % 2 === 0) {
var player1 = "red";
color_count += 1;
} else {
// $(this).css("background-color" +player2);
var player1 = 'yellow';
color_count += 1;
}
$(this).css("background-color", player1);    
})
})
}
$('body').puissance4(7,6);

对不起，法国人评论了台词。

Answer 1

将document.ready()移到函数定义之外：

$.fn.puissance4 = function(x,y) {
̶$̶(̶d̶o̶c̶u̶m̶e̶n̶t̶)̶.̶r̶e̶a̶d̶y̶(̶(̶)̶ ̶=̶>̶ ̶{̶
//Define puissance4 function
̶}̶)̶;̶
}
$(document).ready(() => {
$('body').puissance4(7,6);
});