我如何在我的jQuery代碼中加入淡入效果

Question

我想知道如何在這里放置fadeIn代碼？ 我在gridview中有一個gridview，並且我想在用戶單擊“加/減”圖片時在其中添加效果，截至目前，我的效果只是通過gridview的簡單彈出窗口，我該如何放置fadeIn或slideDown影響到我的代碼？

下面是我的代碼

$("[src*=plus]").live("click", function() {
    $(this).closest("tr").after("<tr><td></td><td colspan ='100%'>" + $(this).next().html() + "</td></tr>");
    $(this).attr("src", "../Images/Icons/minus2.png");
});
$("[src*=minus]").live("click", function() {
    $(this).attr("src", "../Images/Icons/plus2.png");
    $(this).closest("tr").next().remove();
});

Answer 1

如果立即在生成的元素上添加display：none，則應該可以將其淡入。要淡出，您需要在fadeOut函數中使用回調函數來刪除該元素，這樣就有時間過渡放下之前。 *根據您的需要進行了修改，以使行淡化而不是圖像淡化

$("[src*=plus]").live("click", function () {
      $(this).closest("tr").after("<tr style='display:none;'><td></td><td colspan ='100%'>" + $(this).next().html() + "</td></tr>");
      $("tr[style*='display:none']").fadeIn(500);
      $(this).attr("src", "../Images/Icons/minus2.png");
});

$("[src*=minus]").live("click", function () {
      $(this).attr("src", "../Images/Icons/plus2.png");
      var removedTr = $(this).closest("tr").next();
      removedTr.fadeOut(500, function(){
         removedTr.remove();
      });
});

Answer 2

這將最初隱藏內容，使您可以使用fadeIn()

$("[src*=plus]").live("click", function () {
    var container = $(this).closest("tr"),
        newContent = $("<tr><td></td><td colspan ='100%'>" + $(this).next().html() + "</td></tr>").hide();
    container.after(newContent);
    newContent.fadeIn();
    $(this).attr("src", "../Images/Icons/minus2.png");
});

$("[src*=minus]").live("click", function () {
    $(this).attr("src", "../Images/Icons/plus2.png");
    $(this).closest("tr").next().fadeOut(function() {
        $(this).remove();
    });
});