JQuery custom event handler on element enter

Question

Here is the thing I have 4 box and a circle (just some sample elements) the circle is position absolute and can freely move throw boxes by a trigger.

Now I need to do something on entering the circle into a box .I was wondering if there is any way to define a custom event handler something like "circleenter" instead of "mouseenter"

Here is a JSFiddle

On mouse hover of each box the circle will move to that box and change the color suppose we want to change color of all passed squares too or do something else on squares in path.

Script:

$(document).ready(function(){
    var circle=$(".circle");
    $(".box").mouseenter(function(){
        var $this=$(this),
            idx=$this.index();
        width=$this.width();
        var animate={left:width*idx+18};
        circle.animate(animate,200,function(){
            $this.css("background","#888");
        });
    });
});

CSS:

#box-wrapper{
    position:relative;
    width:400px;
    height:100px;
}
.box{
    width:75px;
    height:75px;
    border:1px solid #000;
    background:#ccc;
    float:left;
    cursor:pointer;
}
.circle{
    position:absolute;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#fff800;
    left:18px;
    top:18px;     
}

This is just an example so the question is in such a situation can we have something like $(".box").on("circleenter")?

Thanks in advance.

Answer 1

You can't make the event fire automatically, but you can trigger a custom event using the jQuery trigger method documented here. Example from the docs:

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

From the comments it seems that you would like the event to fire as the circle passes through the squares, regardless of whether the mouse has entered the circle. That being the case I can't see any solution other than using the 'progress' option on the animation, and check whether you have entered a square at each step. You need to watch out for performance problems though...

$(document).ready(function(){
    var circle=$(".circle");

    $('.box').on('circleenter', function(){
        $this.css("background","#888");
    });

    $(".box").mouseenter(function(){
        var $this=$(this),
            idx=$this.index();
        width=$this.width();
        var animate={left:width*idx+18};
        var lastBoxId = null;
        circle.animate(animate,
           {duration: 200, 
            progress: function(){
              //Check whether the circle has entered a box
              var currentBox = //Get the current box;
              if(currentBox && currentBox.id != lastBoxId){
                  $(currentBox).trigger('circleenter');
                  lastBoxId = currentBox.id;
              }
            }});
    });
});

Here are a few SO answers that might help in finding the overlap between the elements:

jQuery/JavaScript collision detection

How to detect overlapping HTML elements

But a google search turns up quite a few more, if they aren't helpful.

Answer 2

You can do something like this with the help of .mouseenter() though :-

$(document).ready(function () {
    var circle = $(".circle");
    $(".box").mouseenter(function () {

        // Trigger the custom event
        $(this).trigger("circleenter");
    });

    // Bound the custom event handler
    $(".box").on("circleenter", function () {
        var $this = $(this),
            idx = $this.index();
        width = $this.width();
        var animate = {
            left: width * idx + 18
        };
        circle.animate(animate, 200, function () {
            $this.css("background", "#888");
        });
    });
});

Demo : Fiddle