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

$(".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()

Answer 2

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 3

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 4

I faced the similar prob. was using .append(); tried with callback functions- but didn't work at all. So, had done a trick and succeeded. Take a brief look. here are the steps-

• while appending contents; take a variable and keep its value incrementing whenever the append-function-block gets called.
  Setting an id with that variable for that element and keeping that hided.

function add_more_charge()
{
var i = $("#store_id_value").val();
var id = 'some_id_'+i;
var str= '<div style="display:none" id="'+id+'">...............</div>';
$("#store_id_value").val(++i);
$("#additional_charges").append(str);
$("#"+id).slideDown();
}

here, within this- <input type="hidden" id="store_id_value" value="2" /> a value is stored, and incremented in every call.

We can generate random numbers. Use of global variables will be a good option too.