如何在加载页面时自动获取动画

Question

i want to make images effect automatically when the page loads. Right now i am using this code js

$(window).ready(function(){
$(pin).click(function(){
  $("#pin01").show().animate({left: '650px'});
})
});

and html

<p id="pin">Click me</p>
<img src="mission.gif" id="pin01" style=" display:none;position:absolute;top:300px;left:300px" />

When i click the button animation occurs. How can i make it possible to do animation automatically after page load without any button?

Answer 1

Simply put the animate line within the ready or load handler depending on your exact needs

$(document).ready(function(){
    $("#pin01").show().animate({left: '650px'});
});

or

$(widnow).load(function(){
    $("#pin01").show().animate({left: '650px'});
});

The document.ready event occurs when the HTML document is loaded and DOM is ready. The window onload event occurs when the DOM is ready as well as all frames, images, etc have been loaded.

Answer 2

You can try trigger as well:

$(window).ready(function(){
  $('#pin').click(function(){ //<-- note the correction, it was `$(pin)` before
    $("#pin01").show().animate({left: '650px'});
  }).trigger('click'); //<-- triggers event
});