jquery - Animate i jQuery - Udvikleren.dk - Programmering, webdesign og grafik

Tags: jquery

Bruger #16025 @ 04.06.15 09:31

Kære udviklere,

Sidder lige nu og bruger animate i jQuery, og er stødt ind på et mindre problem. Meningen er at når en besøgende "scroller" ned på siden, så skal menuen samt logoet blive mindre. Den del har jeg fået til at virke med animate.

Dog er mit problem at der åbenbart er forskel på om du bruger "scroll"-knappen på musen eller i browservinduet. Hvis jeg bruger musen's "scroll"-knap, virker det udemærket. Dog, hvis jeg bruger browserens scroll-bar animater menuen sig efter hvor hurtigt du scroller med baren.

Det er lidt svært at forklare, men jeg håber på at I forstår.

Jeg har bygget det hele op på den klassiske måde. Dog er der flere steder jeg bør ligge scripts'ne sammen, men det er en mindre detalje.

JScript kode

 $(window).scroll(function() {
         var _val = $(window).scrollTop();
         
         if(_val > 113) {
             $('.site-header').stop().animate({
                 height          : '73px'
             }, 'fast').addClass('box-shadow');
     
             $('.main-navigation').stop().animate({
                 marginTop       : '10px'
             }, 'fast');
             
             $('.site-title').stop().animate({
                 height          : '43px',
                 width           : '69px',
                 backgroundSize  : '100%'
             }, 'fast');
     
             $('.site-title a').css({
                 height          : '43px',
                 width           : '69px'
             });
         } else {
             $('.site-header').stop().animate({
                 height          : '113px'
             }, 'fast').removeClass('box-shadow');
     
             $('.main-navigation').stop().animate({
                 marginTop       : '30px'
             }, 'fast');
             
             $('.site-title').stop().animate({
                 height          : '83px',
                 width           : '134px'
             }, 'fast');
     
             $('.site-title a').css({
                 height          : '83px',
                 width           : '134px'
             });
         }
     });

Effekten skal først finde sted når man har scrollet 113pixel på siden. Det har noget at gøre med menuen's højde.

Nu har jeg ikke arbejdet så meget med animate før. Derfor, hvis der er regler i forhold til animate som ikke bliver overholdt, så sig endelig til.

Håber at der er nogen som kan hjælpe :-)

3 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 14 karma

Sorter efter stemmer Sorter efter dato

Bruger #12581 @ 09.06.15 19:22

Hej Daniele

Det problem du oplever skyldes, at når du scroller en smule med musen, så aktiveres første del af din if-sætning.
I det øjeblik du så scroller lidt mere (og det gør man jo hele tiden, når man bruger scrollbaren), så aktiveres første del af din if-sætning igen, og her stopper du så animationen, inden den animeres igen.

Derfor opleveres det langsommere når man bruger scrollbaren.

Jeg vil foreslå, at du i første del af din if-sætning, inden du kører animationerne, tjekker om der allerede er tilføjet classen "box-shadow" til .site-header. Hvis dette er tilfældet, skal den IKKE animere igen, da den allerede har gjort dette.

Ligeledes i anden del af din if-sætning (elsen), så tjekker du om classen "box-shadow" er sat på .site-header og kun i dette tilfælde, skal den køre animationen den anden vej.

Dermed sikre du, at animationen kun bliver kørt én gang og ikke hver gang man scroller, som nu er tilfældet.

JS'en kunne se sådan ud:

JScript kode

 $(window).scroll(function() {
          var _val = $(window).scrollTop();
 
          if(_val > 113) {
              if (!$('.site-header').hasClass('box-shadow')) {
                  $('.site-header').animate({
                      height          : '73px'
                  }, 'fast').addClass('box-shadow');
          
                  $('.main-navigation').stop().animate({
                      marginTop       : '10px'
                  }, 'fast');
                  
                  $('.site-title').stop().animate({
                      height          : '43px',
                      width           : '69px',
                      backgroundSize  : '100%'
                  }, 'fast');
          
                  $('.site-title a').css({
                      height          : '43px',
                      width           : '69px'
                  });
              }
          } else {
              if ($('.site-header').hasClass('box-shadow')) {
                  $('.site-header').stop().animate({
                      height          : '113px'
                  }, 'fast').removeClass('box-shadow');
          
                  $('.main-navigation').stop().animate({
                      marginTop       : '30px'
                  }, 'fast');
                  
                  $('.site-title').stop().animate({
                      height          : '83px',
                      width           : '134px'
                  }, 'fast');
          
                  $('.site-title a').css({
                      height          : '83px',
                      width           : '134px'
                  });
              }
          }
      });

Tjek evt. denne jsfiddle, hvor jeg har prøvet at genskabe dit problem:

http://jsfiddle.net/jmz5Lqzm/

Bruger #16025 @ 10.06.15 09:29

442

Nu har jeg ikke været herinde i nogle dage, og har derfor ikke set din geniale løsning. Valgte nemlig at fjerne hele animations-delen, og kun ændre på højden af headeren uden den animerer det. Dog kan jeg sagtens bruge din løsning til et senere tidspunkt, så tusind tak for hjælpen!

Bruger #12581 @ 10.06.15 10:01

Helt ok, jeg var også sent med svaret.

Super du fandt en løsning :-)

Animate i jQuery

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler