jQuery animate startet stark verzögert

[Snooty]

Hio,

ich möchte gerne ein div (#go-pdf) mit animate() um 55px verschieben wenn man das Fenster (am Smartphone) scrollt.

Das klappt prinzipiell, aber die Animation wird erst mehrere Sekunden, teils eine halbe Minute oder noch später angezeigt. Hat jemand eine Idee, was da hakt?

Das ganze sieht man hier (im mobilen Layout) rechts unten bei dem PDF-Icon, das verschwinden soll (hier als Video ab Sekunde 23).

Spoiler: Javascript

    /*  Back To Top Button
  ------------------------------------------------------- */
  var pxShow      = 300; //height on which the button will show
  var fadeInTime  = 400; //how slow/fast you want the button to show
  var fadeOutTime = 400; //how slow/fast you want the button to hide
  var scrollSpeed = 300; //how slow/fast you want the button to scroll to top. can be a value, 'slow', 'normal' or 'fast'

   // Show or hide the sticky footer button
  $(window).scroll(function() {

    if ($(window).scrollTop() >= pxShow) {
      $("#go-top").fadeIn(fadeInTime); /*das fadeIn funktioniert */

          if($(window).width() < 768) {
	    $("#go-lang").fadeOut(fadeInTime); /*das fadeOut funktioniert */
	    $("#go-pdf").animate({"bottom": "5px"}, "slow"); /* animate startet verzögert */
	  }

    } else {
      $("#go-top").fadeOut(fadeOutTime); /*das fadeOut funktioniert */

	  if($(window).width() < 768) {
	    $("#go-lang").fadeIn(fadeInTime); /*das fadeIn funktioniert */
	    $("#go-pdf").animate({"bottom": "60px"}, "slow"); /*animate startet verzögert */
	  }
    }
  });

Spoiler: CSS

/* Go To Top / Language / PDF Buttons */
#go-top, #go-lang, #go-pdf {
  position: fixed;
  bottom: 5px;
  right: 5px;
  text-align: center;
  display: none;
  background-color: #494949;
  border-radius: 21px;
  z-index:10000
}

#go-lang {
  bottom: 5px;
  z-index:9999
}

#go-pdf {
  bottom: 60px;
  z-index:9998
}

 

[coolmodi]

Du startest beim scrollen die Animationen ja auch hunderte Male, würde mal behaupten das könnte das Problem sein.

 

[Snooty]

Danke, das ist schon mal ein guter Tipp.

Leider bekomme ich das trotzdem nicht gelöst. Ich habe es mit der one()-Methode versucht als auch mit einer Zählervariable; beides Tipps, die man bei stackoverflow findet

Ebenso habe ich versucht, das div nur dann zu verschieben, wenn beim div #go-top die Eigenschaft display = block ist. Aber auch das klappt nicht.


Noch jemand eine Idee? Vielleicht geht es auch ganz anders? Ich will einfach, dass das div #go-pdf verschoben wird, sobald über eine bestimmte Höhe gescrollt wurde; bzw. wieder in die andere richtung verschieben wenn man zurückscrollt.

Habe jetzt das Beispiel gefunden, das funktioniert: http://jsfiddle.net/37LZ5/