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();
    });
});

如何在我的jquery代码中添加fadein效果

2 个答案: