jQuery动画直到第二次点击才会启动

Question

我正在尝试为我们的网站标题创建一个万圣节主题动画，其中包含一个蜘蛛图像，它在点击时随机移动。我真的在这个小小的项目上大展拳脚，尽管我已经设法使动画大部分按我想要的方式工作，但我无法弄清楚如何让动画在第一次点击时开始。图像不会移动，直到第二次点击，然后它运行非常符合我的意图。

我已阅读了有关动画的几个问题的答案，这些动画并不是在第一次点击时开始的，但他们都没有帮助我解决脚本中的问题。有人能指点我正确的方向吗？

动画需要在供应商控制的运行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与我的脚本。

Answer 1

在您的情况下，只有当您第一次点击#spider时才会添加toggle处理程序，因此在第一次点击时不会执行切换。

// 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); 
      }); 
     }); 
    }); 

演示：Fiddle

如果要维持某种原因，目前的结构，那么你可以尝试触发点击功能后手动切换处理程序注册like in here