fire two events simultaneously in jquery on same selector

Question

This should be easy, but I'm a newbie...

How can I make the show function and the click to animate function work as one?

function scrollit() {
    $("#scrollDown").show();
    $("#scrollDown").click(function() {
        $('html,body').animate({scrollTop: $('#scrollDown').offset().top}, 1500);
    });
}

See: http://jsfiddle.net/elasticGurl/3r6Jp/4/

What's supposed to happen is

1. the button is clicked
2. the hidden div scrollDown is displayed
3. At the same time as #2, it should also move down a bit at the same time

The problem is it needs to be clicked twice in order for it to move down.

Answer 1

That's because your click function is on your hidden div instead of on your button

function scrollit() {

    $("#scrollDown").show();
    $('html,body').animate({scrollTop: $('#scrollDown').offset().top}, {duration:1500, queue:false});
}​

Answer 2

You are just binding the event of click you need to fire the event too:

function toggleDiv() {

$("#scrollDown").show().click(function() {
  $('html,body').animate({scrollTop: $('#scrollDown').offset().top}, 1500);
});
   $("#scrollDown").click();
}

Answer 3

Here is working sample: http://jsfiddle.net/FSfRR/1/

   var count = 0;
   $(".checkout_btn").click(function() {
       $("#scrollDown").show();
      count++;
      $('html,body').animate({scrollTop: $('#scrollDown').offset().top}, 1500);
      if(count==1)
          $(this).trigger('click');
      else 
          count = 0;
   });

Answer 4

try with jQuery 1.8.2

$(document).on('click','p#scrolltest', function (){
  $("div#scrollDown").show('fast', function(){
       $('body').animate({
           scrollTop: $('#scrollDown').offset().top
           }, 1500);
        });
});

Working Demo