jQuery动画赢得'；直到第二次单击才开始

我正在尝试为我们的网站标题创建一个万圣节主题的动画，其中包括一个蜘蛛的图像，当点击它时，它会“随机”移动。我在这个小项目上真的很努力，虽然我已经设法让动画大部分按我想要的方式工作，但我就是不知道如何让动画在第一次点击时就开始。直到第二次点击，图像才移动，然后它几乎按照我的意愿运行

我已经通读了关于动画的几个问题的答案，这些问题不是第一次点击就开始的，但是没有一个能够帮助我解决脚本中的问题。有人能给我指一下正确的方向吗

动画需要在运行jQuery 1.7.2的供应商控制的平台上运行

事先非常感谢您的帮助。如果没有这个网站，我就不会在脚本方面走得那么远

HTML:

这是页面标题

Lorem ipsum dolor sit amet，是一位杰出的献身者。杜奈克芦苇
这是一个很好的例子。埃尼安·坦帕斯·奥古斯特。塞德精英
内克，我要一根草，我要一根欧舌苔。奥古斯·奥迪奥·努拉姆·特里斯蒂克
权杖马萨埃利芬德nec。双元素层软泥虫
秃鹫。这是一种非尼斯拉奥里特式的酒，是一种康茂德式的酒。
这是一种无主元素的连续性，是一种妊娠期无主元素。
酒后酒、酒前酒和酒后酒、酒后酒和酒后酒。埃尼安
Placelat-porta-sapien。埃蒂亚姆·奥克托、利奥·维塔·马蒂斯、厄洛斯·里索斯
弗林尼利亚·尼布，我是一个喜欢turpis的人。奎斯克·图皮斯·梅特斯，
调味品eget Concertetur eu，pulvinar a massa。梅塞纳斯·维尼纳蒂斯·厄罗斯·奥古斯（Maecenas venenatis eros-augue），调味品波特提特（porttitor erat varius）位于。这是我的梦想。


麦格纳大酒庄、马萨大酒庄、图尔皮斯拍卖行。不平等
酒后驾车。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。Phasellus hendrerit ut nunc
普莱斯特拉特酒店。他坐在萨皮安的公寓里。晨曦威胁着我的心，
nec congue purus dapibus位于。莫比元素，维韦拉饮食中的尼布，猫科动物
leo eleifend magna，我是leo ut mauris。

脚本：

$(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

$（文档）.ready（函数（）{
//将蜘蛛图像添加到标题
$（''）.prependTo（'#hd'）；
//注：蜘蛛网图像的总高度为620px，因此顶部：-592px将蜘蛛网放置在标题区域
$（'#spider'）.css({
“左”：“125px”，
“顶部”：“-592px”
});
//水滴：从蜘蛛丝图像的总高度中减去87%的窗口高度
//我们试图让蜘蛛下降到窗口的较低区域，但不能低于可见区域
var液滴；
var dropMax=$（窗口）.height（）；
如果（最大压降<600）{
液滴=（（dropMax*.87）-592）；
}否则{
液滴=“0”；
}
//为上下拉列表偏移生成随机数
函数randomFromInterval（下限、上限）{
返回Math.floor（Math.random（）*（上限-下限+1）+下限）*-1；
}
//使十字轴可点击/敲击
$（'#hd'）。在（'click'，'#spider'，函数（）上{
$（this）.toggle（函数（）{
//卡盘下降到准备位置
$（this）.stop（）.animate({
顶部：dropLow-Math.floor（（Math.random（）*80）+1）+“px”
}, 3400);
}，函数（）{
//蜘蛛升起
//随机生成1或-1作为左/右偏移的乘数
var plusOrMinus=Math.random（）<0.5？-1:1；
$（this）.stop（）.animate({
//蜘蛛上升直到部分隐藏
顶部：'-609px'
}，2100，函数（）{
$（此）。延迟（1000）。设置动画({
//蜘蛛爬起来直到完全隐藏
顶部：'-630px'
}, 1200);
//计算十字轴相对于父div#hd的新左偏移量
//并添加一个随机的正或负乘数
var myNewLeft=$（this.position（）.left+（plusor减号*36）；
//如果新的左偏移量不在div#hd之外，请将十字轴移到那里
//请注意，在此移动过程中，十字轴被隐藏（窗口上方）
如果（myNewLeft>0）{
$（this.delay（1000）.stop（）.animate（{left:myNewLeft+'px'）；
}
$（此）.delay（1000）.stop（）.animate({
//部分显示十字轴（注意顶部位置从-630px变化）
顶部：'-609px'
}，1600，函数（）{
$（此）.delay（1000）.stop（）.animate({
//spider随机掉落一个数量（但停留在收割台区域）
顶部：randomFromInterval（592495）+“px”
}, 1200);
});
});
});
});
}); // 准备就绪

---

这是我的脚本的一个示例。

在您的示例中，只有在第一次单击

#spider

时才会添加

切换处理程序，因此切换不会在第一次单击时执行

// make spider clickable/tappable
$('#spider').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);
            });
        });
    });

//使蜘蛛可点击/点击
$（'#spider'）。切换（函数（）{
//卡盘下降到准备位置
$（this）.stop（）.animate({
顶部：dropLow-Math.floor（（Math.random（）*80）+1）+“px”
}, 3400);
}，函数（）{
//蜘蛛升起
//随机生成1或-1作为左/右偏移的乘数
var plusOrMinus=Math.random（）<0.5？-1:1；
$（this）.stop（）.animate({
//蜘蛛上升直到部分隐藏
顶部：'-609px'
}，2100，函数（）{
$（此）。延迟（1000）。设置动画({
//蜘蛛爬起来直到完全隐藏
顶部：'-630px'
}, 1200);
//计算十字轴相对于父div#hd的新左偏移量
//并添加一个ra
// make spider clickable/tappable
$('#spider').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);
            });
        });
    });