JQuery'm neden yavaş çalışıyor?

JQuery için son derece yeni, bugün bakmaya başladım. Bu küçük kodun çalışmamasına neden olan her şeyi araştırdım. Aşağı kaydırdığınızda, h1'in yana doğru hareket etmesini ve bir menü düğmesinin görünmesini istiyorum. Bu işe yarıyor, ancak tekrar yukarı kaydırdığımda, kendini tersine çevirmek çok uzun zaman alıyor. Gecikme gibi bir şeye neden olabilecek bir şey yapmaya çalıştım ama görebildiğim kadarıyla bir problem yok. web Bağlantı: Burada http://www.dragonmath.net/rockets JQuery'm neden yavaş çalışıyor?

benim kodudur:

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

Ben kodu ile görebiliyordu temel sorun kaydırma işlendiğini nasıl

* { 
    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; 
}

kaynak

2015-05-09 Taylor

, Her kaydırma olayı için menu öğesine gecikme ekliyorsunuz. o gecikmesi bunun kaydırma denetler her zaman yapmak zorunda çünkü

Yani

$(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; 
     } 
    }); 
});

kaynak

2015-05-09 06:17:43

yüzden yavaş deneyin? – Taylor

@Taylor evet ... animasyonun çalışması için önce eklenen tüm gecikmeleri çalıştırması gerekiyor ... böylece [.stop()] 'ı kullanabiliriz (https://api.jquery.com/stop/ Animasyon kuyruğundaki herhangi bir öğeyi temizlemek ve her bir blokun anahtar üzerinde sadece bir kez yürütüldüğünden emin olmak için bir bayrak kullanın ( –

). Bu çok daha mantıklı. – Taylor

JQuery'm neden yavaş çalışıyor?

cevap

İlgili konular