jQuery Slideup/Down Append Question

Question

$(".item").hover(
  function () {
    $(this).slideDown().append(
      $("<div class=\"attending\">Yes/No</div>")
     );
  }, 
  function () {
    $(this).find("div:last").slideUp().remove();
  }
);

I am using the above code to append a div onto the bottom of an element when rolled over. I have a number of .item divs, each one getting it appended to them on rollover, but for some reason I am unable to make the slidedown/up work.

Any ideas?

Answer 1

Intuitively I'm giong to say that you're claling the slide effect on the wrong element. It's being called on .list rather than div.attending, which is the box I presume you want to appear.

Answer 2

try

$(".item").hover(
  function () {
    $(this).append(
        $("<div class=\"attending\">Yes/No</div>").hide();
    ).find("div:last").slideDown();
  }, 
  function () {
    $(this).find("div:last").slideUp("normal", function() {
      $(this).remove();
    });
  }
);

Answer 3

$(".item").hover(
    function () {
        var answer = $("<div class=\"attending\">Yes/No</div>").hide();
        answer.appendTo($(this)).slideDown();
    }, 
    function () {
        $(this).find("div:last").slideUp("normal", function() {
            $(this).remove();
        });
    }
);

It doesn't slide down!

You appended the wrong child to the wrong element and you forgot to hide the element first.

It doesn't slide up!

This line starts sliding up, but doesn't wait for the animation to finish and removes the element.

$(this).find("div:last").slideUp().remove()