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.
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.hovercallback before the DOM has been loaded. The simplest way to address this is to move it into the scope of your .ready() bound function.