Langsam Jquery-Animation

Habe ich diese Webseite : http://miloarc.pyrogenicmedia.com/

Welche atm ist nichts besonderes. Es hat ein paar Effekte, aber keine, die die bank brechen.

Wenn Sie mit der Maus über eine Kachel, Sie sollten ändern Sie die Deckkraft, um es einen fade-Effekt. Dies erfolgt durch den Jquery-Animation, nicht durch CSS (ich mache das so, es kann verblassen, anstatt eine gerade ändern). Sieht alles nett aus, wenn die Seite geladen wird, und die verblasst look perfekt. Infact, wenn Sie ziehen Sie die Maus ganz über dem Platz, wenn Ihnen ein "trail" fast wie eine Schlange.

Trotzdem, Mein Nächstes problem ist, dass Sie werden sehen, es ist ein Feld in der linken oberen, die wird Ihnen sagen, Informationen über die Kachel, die Sie schweben über. Dies scheint gut zu funktionieren. Wenn Sie mit der Maus über die info-box, wechselt es die position (So dass Sie erreichen können, die Fliesen, die zuvor verborgen waren darunter). Von meinem Verständnis ist dies alles gut funktioniert, und auf den Brief.

Jedoch Nach einem verschieben der info-box (Eine hover). Anzeigen der Seite in Firefox dreht slugish. So, nach einem erfolgreichen Umzug der info-box, die fade-Effekte sehr stotterte, und es nicht abholen Ereignisse so schnell, das heißt, Sie können nicht zeichnen eine "Spur" auf dem Bildschirm.

Chrom nicht dieses Problem haben. Es scheint gut zu funktionieren, egal was. Safari scheint auch ok. Obwohl ich merke, wenn ich meine Maus sehr schnell, es hat ein bisschen springen, aber nicht so viel wie firefox.

Internet explorer funktioniert überhaupt nicht. Scheint, um den browser zum Absturz bringen... Und es ist ein Fehler mit der gerundeten Ecke-plugin im Einsatz (Nicht sicher, warum...).

Alles in allem denke ich, dass was auch immer ich Tue in meinem code muss stark träge. Aber ich weiß nicht, wo es passiert ist.

Hier ist der vollständige code, aber ich würde Ihnen raten, gehen Sie auf den link um alles.

        <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>

Vielen Dank für jede Hilfe :).

BEARBEITEN : Nur re-iterieren, was ich meine. Ich bin auf der Suche, um zu wissen, warum es geht nur träge nach dem verschieben der info-box. Bevor dies alles ist absolut in Ordnung. Nach dem Umzug der box (Und schiebt es zurück), die UI nur wird super langsam.

InformationsquelleAutor MindingData | 2010-06-08
Schreibe einen Kommentar