添加fadeIn（）in

Question

我想在我的代码中添加fadeIn（），尝试了一些可能性但不适合我。你能告诉我在哪里放fadeIn（）吗？所有其他可能性？为什么只有那些会起作用？代码在这里。 https://codepen.io/ma-halepoto/pen/aqOWXQ

//loading DOM before any other execution.
$(document).ready(function() {
  // making callback function to make a grid.
  $("#sizePicker").submit(function makeGrid(e) {
    // emptying the table for fresh-reload.
    $("table").empty();
    // Pulling out input numbers.Storing them in block-scop unchangable variables.
    const height = $("#inputHeight").val();
    const width = $("#inputWeight").val();
    //creating rows+appending. 
    for (let r = 1; r <= height; r++) {
      $("table").append('<tr></tr>');
      //creating columns+appending.
      for (let c = 1; c <= width; c++) {
        $("tr").last().append('<td></td>');
      }
    }
    //preventing grid from vanashing.    
    e.preventDefault();
    //calling event on pixelCanvas for/to click to listen action of accepting color on each coloumn.
    $("#pixelCanvas").on("click", "td", function(event) {
      var color = $("#colorPicker").val();
      $(event.target).css("background-color", color);
    })
  })
})

Answer 1

fadeIn仅在项目不可见时才有效。

例如：

$(selector).hide().fadeIn()

在您的代码中，您可以更改

$("table").empty()

到

$("table").empty().hide()

然后当你构建表格时：

$("table").fadeIn()

如果你$("table").show().fadeIn()或$("table").fadeIn()没有隐藏它（使用.hide()或.fadeOut()），那么它已经可见并且什么都不做。

您可以将fadeOut与回调一起使用，例如：

＆＃13;

＆＃13;

$("#btn").click(function() {
    
    $("#eg").fadeOut(function() {
        $("#eg").text("updated text");
        $("#eg").fadeIn();
    });
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='eg'>some text</div>
<button type='button' id='btn'>click me</button>

＆＃13;

＆＃13;

＆＃13;