Jquery click event to on load event

Question

I am using this code to trigger on click button .How can I change this when page load?

$(document).ready(function() {
    $('#slideleft button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() :      0});
  });
}

My html

<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner" style="left: -350px;">Animate this element's left style property</div>
</div>

I want to slide in when the page load not clicking the button.

Put the animate call directly in the .ready() function, not in the click function. — Barmar
– Barmar, Commented Feb 6, 2014 at 18:25

Huangism · Accepted Answer · 2014-02-06 18:55:57Z

1

Run the code when document is ready or on widow load

$(document).ready(function() {
    var $lefty = $('#slideleft button').next();
    $lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() :      0});
}

on window load

$(window).load(function() {
    var $lefty = $('#slideleft button').next();
    $lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() :      0});
});

for speed

$lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0}, 1000);

the 1000 is 1000 milliseconds, you can also add callback on animation complete, for more details go to http://api.jquery.com/animate/

edited Feb 6, 2014 at 18:55

answered Feb 6, 2014 at 18:27

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sadia Mehjabin Over a year ago

Thank you .Is there any way to control slide speed?

Saman Gholami · Accepted Answer · 2014-02-06 18:30:14Z

0

If you want to completely loading the page then the effect start you can do this :

$(window).load(function () {

     var $lefty = $('#slideleft button').next();
     $lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() :      0});

});

This effect starts after finishing page loading. But if you want to start the effect real time you can use this :

$(document).ready(function () {

     var $lefty = $('#slideleft button').next();
     $lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() :      0});

});

answered Feb 6, 2014 at 18:30

Saman Gholami

3,5127 gold badges34 silver badges72 bronze badges

Collectives™ on Stack Overflow

Jquery click event to on load event

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related