I have two divs as seen in this JSFiddle. To recreate the problem, keep clicking on the Gray container till both divisions touch each other.The purpose is to execute a certain function once the green div touches the red one. The problem is that, this step callback as seen from the following code and demo, gets called multiple times. It is not something that I want to happen.One method that would fix the problem is to keep a certain flag variable which turns True once step is executed. But I'm not sure that's enough as there needs to be a way to break out of the step callback.I want to know:If there is a better/efficient way to detect collision of two divs than using jQuery Collision.How to stop the step callback after its executed once.HTML:<div class=container>    <div class=test></div>    <div class=menu></div></div>JavaScript:$(document).ready(function () {    var hit_list;    $(.container).click(function () {        $(.menu).stop().animate({            left: +=100px        }, {           duration: 300,           complete: function () {               $(.menu).animate({                   left: 0               }, 800);           },           step: function(){               //Test for collision               hit_list = $(.menu).collision(.test);               if (hit_list.length != 0) {                   $(.container).append(Welcome Earthling);               }           }         });     }); });
Detecting collision of two divs
javascript;jquery;html;css;collision