[question] stop .animate if x.top > 200

[question] stop .animate if x.top > 200

question: When a lion and a tiger meet, can they stop????


http://jsfiddle.net/jsfiddle135/f4qjadvL/2/


$(document).ready(function() {
    $("#meet_liontiger").bind("click", function() {
       var lio;
         $("#lion").animate({top: 30 }, 3200, function(){
          
           lio = $(this).position();
         });       //top:420, left:0
                      
       $("#tiger").animate({top:500}, {   //top:20, left:0
           speed: "slow",
           step: function(top) {
               if (top == lio.top) { 
                   $("#lion").stop();
                   $("#tiger").stop();
               }//if
           }//step
       });//#tiger
     
   });//shoot
});//document

</script>

 <style>
#tiger {
    position: absolute;
    top: 20px;
    left: 0px;
    font: 24px arial;
}
#lion {
    position: absolute;
    top: 420px;
    left: 0px;
    font: 24px arial;
}

</style>
</head>
<body>
 <div id="lion">lion</div>
 <div id="tiger">tiger</div>
    <button id="meet_liontiger">Meet Each Other!</button>
</body>
</html>