FadeIn/FadeOut in Safari und Chrome geht nicht

[XMathiasX]

Liebe Gemeinschaft,
ich verstehs nicht... In Firefox funktioniert das Script super, aber in Safari und Chrome geht gar nicht. Ich habe versucht rauszufinden woran das liegt, aber ich habe keine Ahnung. Ich habe mich auch in diesem Forum umgeschaut und zwar keine Lösung, aber dafür andere interessante Themen gefunden. Daher hoffe ich, dass mir hier jemand helfen kann.

Dieses Script:

$(window).on("load",function() {
  function fade() {
    $('img').each(function() {

      var objectBottom = $(this).offset().top + $(this).outerHeight();
      var windowBottom = $(window).scrollTop() + $(window).innerHeight();


      if (objectBottom < windowBottom) {
        if ($(this).css('opacity')==0.1){$(this).fadeTo(200,1);}
      } else {
        if ($(this).css('opacity')==1) {$(this).fadeTo(200,0.1);}
      }
    });
  }
  fade();
  $(window).scroll(function() {fade();}); 
});

Funktioniert super im Firefox, aber wie gesagt nicht in Chrome oder Safari. Andere Browser habe ich nicht probiert.

ehm... Hilfe?

 

[mikdoe]

was schreiben die browser in die konsole?
mit welcher version des safari testest du?

 

[XMathiasX]

Wird hier jede Antwort erst kontrolliert, bevor Sie freigeschalten wird? warum ist meine letzte Antwort plötzlich verschwunden?

Browserversion: Safari 5.7.1 und Chrome Version 49.0.2623.112 m (64-bit)

Chroms Console sagt:

sticky.js:58 Uncaught ReferenceError: S is not defined(anonymous function)
@ sticky.js:58fire
@ atv.js:3048self.fireWith
@ atv.js:3160jQuery.extend.ready
@ atv.js:433completed
@ atv.js:104

Safaris sagt:

ReferenceError: Can't find variable: S
Zuweisung fehlgeschlagen
(anonyme Funktion)
(anonyme Funktion)
(anonyme Funktion)

und das wiederholt sich sehr oft in der Konsole...

 

[kkapsner]

Diese Fehlermeldungen haben jetzt nicht mit dem Code, den du uns gezeigt hast, zu tun, können aber ev. die Ursache für das Problem sein. Was ist denn dieses sticky.js?

PS: Nach einem uns auch unbekannten System müssen manche Beiträge freigeschaltet werden...

 

[mikdoe]

* #3 wegen Doppelung gelöscht *

 

[XMathiasX]

nagut, für die Zukunft weiß ich es dann hier besser

sticky.js ist meine Experimentierdatei in meinem Experimentier- Projekt. Anfangs habe ich darin nur meine sticky navigation drin definiert, aber dann noch das hinzugefügt, dann noch das usw. In dieser Datei befindet sich das Script, dass die Bilder einfaden und ausfaden soll, also das Script, das ich in meinen ersten Beitrag geschrieben habe.
Ich habe gelesen, dass Safari und Chrome seltsame Ergebnisse liefern, wenn man das Script $(window).innerHeight(); benutzt. Vielleicht ist das ja das Problem, warum mein Script nicht geht, weil die beiden Browser die Ergebnisse von innerHeight falsch ausgeben.

 

[tsseh]

In dieser Datei befindet sich das Script, dass die Bilder einfaden und ausfaden soll, also das Script, das ich in meinen ersten Beitrag geschrieben habe.

in deinem 1. beitrag ist aber weder eine zeile 58 noch eine variable S

sticky.js:58 Uncaught ReferenceError: S is not defined(anonymous function)

 

[kkapsner]

Ich habe gelesen, dass Safari und Chrome seltsame Ergebnisse liefern, wenn man das Script $(window).innerHeight(); benutzt.

Das sollte eigentlich nicht sein. Genau um solche Browserunterschiede nicht beachten zu müssen verwendet man Frameworks wie jQuery. Aber lass dir doch einfach mal windowBottom per console.log() oder alert() ausgeben. Dann siehst du, was die beiden da reinschreiben.