如何在我的 jquery 代码中添加淡入淡出效果答案

【问题标题】：How can i put a fadein effect in my jquery code如何在我的 jquery 代码中添加淡入淡出效果
【发布时间】：2016-07-07 01:05:22
【问题描述】：

我想知道如何将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();
});

【问题讨论】：

注意：没有必要将您的问题标题编辑为“已解决” - 只需接受最有帮助的答案即可。
大家请使用.on，因为.live 已弃用。

标签： javascript jquery gridview

【解决方案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();
      });
});

【讨论】：

哦，哎呀，对不起，我的 javascript 和 jquery 线交叉了。更新了上面的截图！
它必须是 .css 而不是 .style，我的错！ .style 是常规的 javascript，需要不同的语法。
它可以工作，但图像是淡入的。不是里面的gridview。大声笑
FuriousD 的解决方案有效 - 我没有意识到您正在尝试获取 tr 而不是图像，但这是有道理的。更新了我的解决方案以反映这一点。
意志与狂怒D，谢谢！有用！非常感谢！投票赞成！

【解决方案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();
    });
});

【讨论】：

查看涉及newContent的更改