Slow Jquery Animation
- by Pyronaut
I have this webpage : http://miloarc.pyrogenicmedia.com/
Which atm is nothing special. It has a few effects but none that break the bank.
If you mouse over a tile, it should change it's opacity to give it a fade effect. This is done through the Jquery Animation, not through CSS (I do this so it can fade, instead of being a straight change). Everything looks nice when the page loads, and the fades look perfect. Infact if you drag your mouse all over the place, if gives you a "trail" almost like a snake.
Anyway, My next problem is that you will see there is a box in the top left, which is going to tell you information about the tile you are hovering over. This seems to work fine. When you mouse over that information box, it switches it's position (So that you can reach the tiles that were previously hidden underneath it). From my understanding, this is all working fine, and to the letter.
However, After one move of the info box (One hover). Viewing the page in Firefox turns slugish. As in, after a successful move of the info box, the fade effects become very stuttered, and it doesn't pick up events as fast meaning you can't draw a "trail" on the screen.
Chrome doesn't have this issue. It seems to work fine no matter what. Safari also seems ok. Although I do notice if I move my mouse really fast, it does jump a bit but not as much as firefox.
Internet explorer doesn't work at all. Seems to crash the browser... And there is an error with the rounded corner plugin im using (Not sure why...).
All in all, I think whatever I'm doing inside my code must be heavily sluggish. But I don't know where it is happening.
Here is the full code, but I would advise go to the link to view everything.
<script type="text/javascript">
$(document).ready(function()
{
var WindowWidth = $(window).width();
var WindowMod = WindowWidth % 20;
var WindowWidth = WindowWidth - WindowMod;
var BoxDimension = WindowWidth / 20;
var BoxDimensionFixed = BoxDimension - 12;
var dimensions = BoxDimensionFixed + 'px';
$('.gamebutton').each(function(i)
{
$(this).css('width', dimensions);
$(this).css('height', dimensions);
});
var OuterDivHeight = BoxDimension * 10;
var TopMargin = ($(window).height() - OuterDivHeight) / 2;
var OuterDivWidth = BoxDimension * 20;
var LeftMargin = ($(window).width() - OuterDivWidth) / 2;
$('#gamePort').css('margin-top', TopMargin).css('margin-left', LeftMargin).css('margin-right', LeftMargin);
$('.gamebutton img').each(function(i)
{
$(this).hover(
function () {
$(this).animate({'opacity': 0.65});
},
function () {
$(this).animate({'opacity': 1});
}
);
});
$('.rounded').corners();
$('.gamebutton').each(function(i)
{
$(this).hover(function()
{
$('.gameTitlePopup').html($(this).attr('title'));
FadeActive();
});
});
function FadeActive()
{
$('.activeInfo').fadeIn('slow');
}
$('#gameInfoLeft').hover(function()
{
$(this).removeClass('activeInfo');
$(this).fadeOut('slow', function()
{
$('#gameInfoRight').addClass('activeInfo');
FadeActive();
});
});
$('#gameInfoRight').hover(function()
{
$(this).removeClass('activeInfo');
$(this).fadeOut('slow', function()
{
$('#gameInfoLeft').addClass('activeInfo');
FadeActive();
});
});
});
</script>
Thanks for any help :).
