.animate(); startet einige Sekunden zu spät

[lucster]

Hallo liebe Forumsmitglieder,

Ich habe vor kurzem ein kleines js-script zum erstellen eines (upbuttons)
gefunden und in eine Website eingebaut.
Das funktioniert auch wunderbar.
Nun hätte ich den Effekt des .fadeIn() bz. .fadeOut() noch gerne eine .animate(); mit dazu anfügt.
Leider wird diese Funktion jetzt erst ein, zwei Sekunden später ausgeführt.
Weiß jemand warum? :)

ps: Bin Programmieranfänger :)

Hier der Code im Original:

<script>
$(document).ready(function() {

  $("#nach_oben").hide();
 
  
  $(window).scroll(function(){
    var value = 10;
    var scrolling = $(window).scrollTop();
    if (scrolling > value) {
      $("#nach_oben").fadeIn();            
    } else {
      $("#nach_oben").fadeOut(); 
       }
  });
 
  $(window).scroll(function(){
     
    var p = $('div.nach_oben_link');
    var position = p.offset(); 
    var aktuellepos = position.top;
    var footerentry = document.getElementById('wrapper').clientHeight - 100;
    if (aktuellepos < footerentry) {
      $('div.nach_oben_link').removeClass("dark");
    } else {
      $('div.nach_oben_link').addClass("dark");
    }
  });
  
  $('div.nach_oben_link').click(function(){
    $('html, body').animate({scrollTop:'0px'}, 1000);
    return false;
  });
});
</script>

Und hier mit .animate():

<script>
$(document).ready(function() {

  $("#nach_oben").hide();
 
  
  $(window).scroll(function(){
    var value = 10;
    var scrolling = $(window).scrollTop();
    if (scrolling > value) {
      $("#nach_oben").fadeIn().animate({bottom: "20px"},350);            
    } else {
      $("#nach_oben").fadeOut().animate({bottom: "-50px"},350); 
       }
  });
 
  $(window).scroll(function(){
     
    var p = $('div.nach_oben_link');
    var position = p.offset(); 
    var aktuellepos = position.top;
    var footerentry = document.getElementById('wrapper').clientHeight - 100;
    if (aktuellepos < footerentry) {
      $('div.nach_oben_link').removeClass("dark");
    } else {
      $('div.nach_oben_link').addClass("dark");
    }
  });
  
  $('div.nach_oben_link').click(function(){
    $('html, body').animate({scrollTop:'0px'}, 1000);
    return false;
  });
});
</script>

 

[Sempervivum]

Wenn Du Funktionsaufrufe in dieser Form verkettest, werden die Animationen zeitlich nacheinander ausgeführt, d. h. das Animate erst, wenn fadeIn beendet ist. Willst Du, dass sie gleichzeitig ablaufen, musst Du sie quasi gleichzeit starten:

    if (scrolling > value) {
      $("#nach_oben").fadeIn();
      $("#nach_oben").animate({bottom: "20px"},350);            
    }

 

[lucster]

Hallo Sempervivum!

Danke für deine schnelle Antwort. :)

Leider klappt es auch mit dem gleichzeitigen aufrufen nicht.
Für mich sieht es so aus als würde durch --> $(window).scroll(function(){...}
das .animate() zu oft ausgeführt werden. Kann das sein?
Wird wenn ich scrolle das .animate() nachdem es einmal durchgelaufen
ist automatisch beendet od. muss ich das noch irgendwie stoppen.

Kann es sein das dieses Script für die .animate() funktion so nicht klappt
weil bei jedem mal scrollen ein neuer .animate() durchlauf dazukommt?

Hast du vielleicht noch eine andere Idee woran es liegen könnte. :)

 

[Sempervivum]

Ja, Du hast Recht, wenn Du die Animationen mit scroll() startest, kann das zu Problemen mit wiederholten Aufrufen führen. Du kannst eine Animation mit der Funktion stop() beenden:
http://api.jquery.com/stop/

 

[Sempervivum]

PS: Eine bessere Lösung könnte sein, eine Statuskennung zu führen, um das wiederholte Starten zu unterbinden:

$(window).scroll(function(){
    var value = 10;
    var scrolling = $(window).scrollTop();
    var obj = $("#nach_oben");
    if (scrolling > value) {
        if (!obj.hasClass("visi") {
              obj.addClass("visi");
              obj.fadeIn();
             obj.animate({bottom: "20px"},350);
        }
    } else {
        if (obj.hasClass("visi") {
              obj.removeClass("visi");
              // usw.
        }
    }
  });

 

[lucster]

Danke für den Ansatz - werd ich gleich mal dran rumbasteln. :)