У меня есть эта веб-страница: http://miloarc.pyrogenicmedia.com/
В каком банкомате нет ничего особенного.У этого есть несколько эффектов, но ни один не разрушает банк.
Если вы наведите курсор мыши на плитку, она должна изменить ее непрозрачность, чтобы придать ей эффект затухания.Это делается с помощью Jquery Animation, а не с помощью CSS (я делаю это, чтобы оно могло исчезнуть, а не было прямым изменением).Все выглядит хорошо, когда страница загружается, а затухания выглядят идеально.Фактически, если вы перетаскиваете мышь повсюду, если вы получаете «след», почти как змея.
В любом случае, моя следующая проблема заключается в том, что в левом верхнем углу вы увидите окно, которое будет сообщать вам информацию о плитке, над которой вы зависаете.Кажется, это работает нормально.Когда вы наводите курсор мыши на это информационное окно, оно меняет свое положение (чтобы вы могли добраться до тайлов, которые ранее были скрыты под ним).Насколько я понимаю, все это работает нормально, и к письму.
Тем не менее, после одного хода информационного окна (One hover).Просмотр страницы в Firefox становится вялым.Например, после успешного перемещения информационного блока эффекты затухания сильно заикаются, и он не воспринимает события так быстро, что означает, что вы не можете нарисовать «след» на экране.
Chrome не имеет этой проблемы.Кажется, работает нормально, несмотря ни на что.Сафари тоже вроде нормально.Хотя я замечаю, что если я двигаю мышь очень быстро, она немного прыгает, но не так сильно, как Firefox.
Internet Explorer вообще не работает.Кажется, что происходит сбой браузера ... И есть ошибка с плагином с закругленными углами, который я использую (Не знаю, почему ...).
В общем, я думаю, что все, что я делаю внутри своего кода, должно быть очень вялым.Но я не знаю, где это происходит.
Вот полный код, но я бы посоветовал перейти по ссылке, чтобы просмотреть все.
<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>
Спасибо за любую помощь :).
РЕДАКТИРОВАТЬ : Просто повторить мою точку зрения.Я хочу знать, почему это происходит вяло только после перемещения информационного окна.До этого все абсолютно нормально.После перемещения окна (и перемещения его назад) пользовательский интерфейс становится очень медленным.