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

Question

I want to know how can i put the fadeIn code here? i have a gridview inside a gridview and i want to put a effect in it when the user clicks the "plus/minus" picture, as of now my effect is just a simple popup through the gridview, how can i put the fadeIn or slideDown effect into my code?

below is my code

$("[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

If you immediately add display:none to the element you spawn you should be able to fade it in. To fade out, you'll need to use a callback in the fadeOut function for removing the element, that way there's time for it to transition before you drop it. *Revised so the row fades and not the image, based on what you needed

$("[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

This will hide the content initially, allowing you to use 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();
    });
});