Frage

Ich versuche zu fadeIn und fadeOut eine transparente png mit JQuery. Natürlich sieht es glatt in Firefox, aber deutlich weniger als akzeptabel in IE (7 und 8). Es ist ein bekannter Fehler mit IE, und leider scheint es nicht zu viel von einer Vermeidung des Problems zu sein.

Im Grunde, was ich tue, ist Platz ein halbtransparentes weißes Rechteck auf ein Bild um das Bild erscheinen ‚im Hintergrund‘. Ich mag dies reibungslos tun, und das ist, wo fadeIn kommt. Aufgrund des IE Fehlers, aber ich habe stattdessen ein völlig undurchsichtig weißes Rechteck auf das Bild zu fadeIn gezwungen worden, es leider verschwinden zu machen. Während das sieht deutlich besser und ist fast, was ich suche, ist es noch nicht akzeptabel. Der Benutzer muss in der Lage sein einige Bilder auf der Seite, um zu sehen, wenn auch im Hintergrund.

Also meine Frage ist:

Gibt es eine Möglichkeit, die fadeIn Funktion (oder jede Jquery Animation, wirklich) zu stoppen, nachdem 75% der erwarteten Animationszeit animieren?

Das würde mein Bild 75% gemischt, um das weiße Rechteck verlassen, und ich würde nicht mit IE fiesen transparenten PNG-Fehlern umgehen.

Danke!

War es hilfreich?

Lösung

Sie könnten ein undurchsichtiges Bild verwenden und es nur Opazität animieren zu 75%.

  $('#overlay').animate({
    opacity: 0.75
  }, 5000, function() {
    // Animation complete.
  });

Andere Tipps

Statt fadeIn / fadeOut, verwenden Sie die belebtes Funktion die Opazität Eigenschaft auf die gewünschte zu animieren Ebene.

Sie können auch die fadeTo Funktion.

Dies ist der Synthax:

.fadeTo( duration, opacity, [ callback ] )

Nicht für Ihre Situation zu empfehlen, aber hier ist die eigentliche Antwort auf Ihre Frage gestellt: -)

.stop( [ clearQueue ], [ jumpToEnd ] )
  

Wenn .stop () auf ein Element genannt wird,   die derzeit laufende Animation (wenn   vorhanden) wird sofort gestoppt. Wenn wegen   So ein Element verdeckt wird,   mit .slideUp (), wenn .stop () ist   genannt, wird das Element jetzt noch sein   angezeigt, wird jedoch ein Bruchteil sein,   seine vorherige Höhe. Rückrufen   Funktionen werden nicht genannt.

http://api.jquery.com/stop/

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top