Search code examples
javascriptjquerycssjquery-hover

Why isn't .hover function working and how can I get the .hover function to ignore the the area outside of the corner radius?

I'm trying to get circles to react to my jquery .hover. Here's my js:

jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + 
                                            $(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + 
                                            $(window).scrollLeft()) + "px");
return this;
};


$(document).ready(function()
{
    $('#logo').center();
    j=8;
    size=200;
    $.each($(".circle"), function() {
        $(this).css('z-index', j);
        $(this).css({
            height: size+"px",
            width: size+"px",
            borderRadius: size+"px",
            });
        size = size+50;
        $(this).center();
        j--;
    });

});

  $(".circle").hover(
    function() {
      $(this).animate({
        height: '+=25px',
        width: '+=25px',
        top: '-=12.5px',
        left: '-=12.5px'
        }, 'fast'
      );
    },
    function() {
      $(this).animate({
        height: '-=25px',
        width: '-=25px',
        top: '+=12.5px',
        left: '+=12.5px'
        }, 'fast'
      );
    }
  );

Here's my body HTML:

    <div id='logo'><img src='_Source/Logo.png' alt='RB'/></div>
<div id='a1' class='circle'></div><div id='g1' class='circle'></div>
<div id='a2' class='circle'></div><div id='g2' class='circle'></div>
<div id='a3' class='circle'></div><div id='g3' class='circle'></div>
<div id='a4' class='circle'></div><div id='g4' class='circle'></div>

This works on jsfiddle, here

But, on my site it doesn't work, here

If I weren't bald already, I'd be tearing my hair out.

Thanks.

Solution

  • The .hover() binding call is located outside of the scope of your .ready() binding, and is located in the <head>. The net effect is you are attempting to bind the .hover callback before the DOM has been loaded. The simplest way to address this is to move it into the scope of your .ready() bound function.