CODEWITHSUNDEEP
jquery
James
James

Reputation: 6008

jQuery Slideup/Down Append 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?

Upvotes: 11

Views: 15241

Answers (5)

rubyonrails3
rubyonrails3

Reputation: 259

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

Try this it's bit hackish but does its work.

Upvotes: 1

Avisek Chakraborty
Avisek Chakraborty

Reputation: 8309

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.

Upvotes: 1

Dmitri Farkov
Dmitri Farkov

Reputation: 9671

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

Upvotes: 1

Georg Sch&#246;lly
Georg Sch&#246;lly

Reputation: 126105

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

Upvotes: 30

Andrew Noyes
Andrew Noyes

Reputation: 5298

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.

Upvotes: 1

Related Questions