I am attempting to make circles react to my jquery .hover function. Below is the JavaScript code I am using:
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'
);
}
);
This is how my body HTML is structured:
<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>
The functionality works on jsfiddle, here
However, it fails to work on my website, here
If I still had hair, this issue would have me pulling it out.
Thank you.