我正在尝试为我们的网站标题创建一个以万圣节为主题的动画，其中包含一个蜘蛛的图像，当它被点击时它会“随机”移动。我真的在这个小项目上扩展了自己，虽然我已经设法让动画大部分以我想要的方式工作，但我只是不知道如何让动画在第一次点击时开始。图像在第二次单击之前不会移动，然后它会按照我的意图运行。
我已经阅读了关于第一次单击时未启动的动画的几个问题的答案，但没有一个问题能帮助我解决脚本问题。有人可以指出我正确的方向吗？
动画需要在运行 jQuery 1.7.2 的供应商控制平台上运行。
非常感谢您的任何帮助。如果不是因为这个网站，我就不会像我的脚本那样走得那么远。
HTML：
<div id="hd">
<h1>This is the page title</h1>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum nibh in
nunc euismod, eget elementum est consequat. Aenean tempus augue est. Sed elit
neque, semper a cursus a, semper eu ligula. Nullam tristique augue odio, non
scelerisque massa eleifend nec. Vivamus mollis purus lacus, vel elementum dui
vulputate luctus. Sed rutrum nisl non nisl laoreet, sed consequat massa commodo.
Maecenas consectetur elementum nulla, sed pellentesque ligula gravida eu.
Suspendisse arcu dui, pretium et fermentum aliquam, eleifend et arcu. Aenean
placerat porta sapien. Etiam auctor, leo vitae vestibulum mattis, eros risus
fringilla nibh, id adipiscing turpis ante sed lectus. Quisque turpis metus,
condimentum eget consectetur eu, pulvinar a massa. Maecenas venenatis eros augue, condimentum porttitor erat varius at. Praesent quis semper erat.
</p>
<p>
Duis magna magna, rutrum non massa non, porttitor auctor turpis. Aliquam at
aliquet dui. Praesent vestibulum lobortis dapibus. Phasellus hendrerit ut nunc
vitae placerat. Sed sit amet sollicitudin sapien. Morbi imperdiet arcu ipsum,
nec congue purus dapibus at. Morbi elementum, nibh in viverra imperdiet, felis
leo eleifend magna, id facilisis mi leo ut mauris.
</p>
</div>
脚本：
$(document).ready(function(){
// add spider image to header
$('<img id="spider" src="http://lgimages.s3.amazonaws.com/data/imagemanager/41647/spider2.png" alt="Spider hanging from web" />').prependTo('#hd');
// Note: total height of spider/web image is 620px, so top: -592px positions spider in header area
$('#spider').css({
'left' : '125px',
'top' : '-592px'
});
// dropLow: subtract 87% of window height from total height of spider thread image
// we're trying to get spider to drop to lower area of window, but not below visible area
var dropLow;
var dropMax = $(window).height();
if ( dropMax < 600 ) {
dropLow = ((dropMax * .87) - 592);
} else {
dropLow = "0";
}
// generate random number for upper dropdown offset
function randomFromInterval(lowerRange,upperRange) {
return Math.floor(Math.random()*(upperRange-lowerRange+1)+lowerRange)* -1;
}
// make spider clickable/tappable
$('#hd').on('click', '#spider', function(){
$(this).toggle(function() {
// spider drops down to ready position
$(this).stop().animate({
top: dropLow - Math.floor((Math.random() * 80) + 1) + 'px'
}, 3400);
}, function() {
// spider rises
// randomly generate 1 or -1 as multiplier for a left/right offset
var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
$(this).stop().animate({
// spider rises until partially hidden
top: '-609px'
}, 2100, function(){
$(this).delay(1000).animate({
// spider rises until fully hidden
top: '-630px'
}, 1200);
// calculate a new left offset of spider relative to parent div#hd
// and add a randomly positive or negative multiplier
var myNewLeft = $(this).position().left + (plusOrMinus * 36);
// if new left offset is not outside div#hd, move spider there
// note that spider is hidden (above window) during this move
if (myNewLeft > 0 ) {
$(this).delay(1000).stop().animate({left: myNewLeft + 'px'});
}
$(this).delay(1000).stop().animate({
// partially show spider (note top pos change from -630px)
top: '-609px'
}, 1600, function(){
$(this).delay(1000).stop().animate({
// spider drops a random amount (but stays in header area)
top: randomFromInterval(592,495) + 'px'
}, 1200);
});
});
});
});
}); // end ready
这是我的脚本的JSFiddle。