Warum läuft meine JQuery langsam?

Ich bin extrem neu in JQuery, ich habe gerade angefangen, es heute zu untersuchen. Ich habe überall nach dem gesucht, was dazu führen könnte, dass dieser Code nicht funktioniert. Wenn Sie nach unten scrollen, möchte ich, dass sich die h1 zur Seite bewegt und eine Menü-Taste erscheint. Das funktioniert, aber wenn ich wieder hoch scrolle, dauert es extrem lange, um sich umzukehren. Ich habe versucht, alles zu korrigieren, was es wie eine Verspätung oder so etwas verursachen könnte, aber soweit ich sehen kann, gibt es keine Probleme. Link zur Website: http://www.dragonmath.net/rockets Warum läuft meine JQuery langsam?

Hier ist mein Code:

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="styles/main.css" /> 
     <title>Rockets</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    </head> 
    <body> 
     <header> 
      <img id="menu" src="images/menu1.png" /> 
      <div id="headerdiv"> 
       <h1>Rockets</h1> 
       <img id="logo" src="images/logo1.png" /> 
      </div> 
     </header> 
     <nav> 
      <ul> 
       <li> 
        <a>Space Race</a> 
       </li> 
       <li> 
        <a>SpaceX</a> 
       </li> 
      </ul> 
     </nav> 
     <script> 
      $(document).ready(function() { 
       var $menu = $('img#menu'); 
       var $headerdiv = $("div#headerdiv") 
       var $nav = $('nav'); 


       $(window).on('scroll', function() { 
        if ($(window).scrollTop() > 40) { 
         $headerdiv.addClass("testheaderdiv"); 
         $menu.delay(800).slideDown(800); 
         $nav.addClass('testnav'); 
        } 
        if ($(window).scrollTop() < 40) { 
         $menu.slideUp(800, function() { 
          $headerdiv.removeClass('testheaderdiv'); 
         }); 
         $nav.removeClass('testnav'); 
        } 
       }); 
      }); 
     </script> 
    </body> 
</html>

CSS

* { 
    margin: 0px; 
    padding: 0px; 
    color: #00AAFF; 
    font-family: Arial; 
} 

body { 
    height: 800px; 
} 

header { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    height: 100px; 
    width: 100%; 
    background-color: #333; 
    z-index: 1; 
} 

div#headerdiv { 
    display: inline; 
    transition: all 1s; 
} 

h1 { 
    display: inline; 
    margin-left: 40px; 
    font-size: 40px; 
} 

header > img#menu { 
    position: fixed; 
    top: 20px; 
    left: 40px; 
    width: 40px; 
    height: 40px; 
    display: none; 
} 

header > div > img#logo { 
    display: inline; 
    width: 60px; 
    height: 60px; 
    position: relative; 
    top: 18px; 
    left: 20px; 
    transition: height 1s, width 1s; 
} 

nav { 
    position: relative; 
    top: 100px; 
    height: 40px; 
    width: 100%; 
    background-color: #333; 
} 

nav > ul { 
    list-style: none; 
} 

nav > ul > li { 
    display: inline-block; 
    height: 40px; 
    width: 200px; 
    text-align: center; 
    border-right: 1px solid #00AAFF; 
} 

nav > ul > li > a { 
    position: relative; 
    top: 6px; 
} 

.testheaderdiv { 
    margin-left: 80px; 
    transition: all 1s; 
} 

.testnav { 
    display: none; 
}

Quelle

2015-05-09 Taylor

Das Hauptproblem ich mit dem Code sehen konnte, wie Scroll gehandhabt wird, Für jedes Scroll-Ereignis fügen Sie dem Element menu eine Verzögerung hinzu.

versuchen So

$(document).ready(function() { 
    var $menu = $('img#menu'); 
    var $headerdiv = $("div#headerdiv") 
    var $nav = $('nav'); 


    var flag; 
    $(window).on('scroll', function() { 
     if (flag !== 1 && $(window).scrollTop() > 40) { 
      $headerdiv.addClass("testheaderdiv"); 
      $menu.stop(true, true).delay(800).slideDown(800); 
      $nav.addClass('testnav'); 
      flag = 1; 
     } 
     if (flag !== 2 && $(window).scrollTop() < 40) { 
      $menu.stop(true, true).slideUp(800, function() { 
       $headerdiv.removeClass('testheaderdiv'); 
      }); 
      $nav.removeClass('testnav'); 
      flag = 2; 
     } 
    }); 
});

Quelle

2015-05-09 06:17:43

So ist es langsam, weil sie die Verzögerung jedes Mal zu tun ist, mit den Scroll-prüft? – Taylor

@ Taylor ja ... damit die Animation funktioniert, müssen alle Verzögerungen, die zuvor hinzugefügt wurden, ausgeführt werden ... also können wir [.stop()] verwenden (https://api.jquery.com/stop/) um alle Elemente in der Animationswarteschlange zu löschen und ein Flag zu verwenden, um sicherzustellen, dass jeder if-Block nur einmal auf dem Switchover-Fall ausgeführt wird –

Das macht viel mehr Sinn. – Taylor

Warum läuft meine JQuery langsam?

Antwort

Verwandte Themen