Följ kevinlearynet på Twitter!

kevinleary.net

jQuery fadeIn () & fadeOut (): Problem i Internet Explorer

Den 20 januari 2010 Jag uppgraderade demon för detta för att använda jQuery 1,4 och fadeIn () och fadeOut () frågor verkar vara fast i IE7 och IE8.

Jag har märkt några problem med mina jQuery arbete. När jag använder. FadeIn () eller. FadeOut () metoder jag ser ful pixelated text i Internet Explorer.

Preview / Sample / demonstration

jQuery Fading Problem i Internet Explorer

Hur det är fast

Ange en bakgrundsfärg med CSS på elementet som försvinner in eller ut.

En alternativ metod

Om du har problem med metoden ovan ger detta jQuery plugin ett försök.

Tack vare Bill: Jag minns inte var jag fick det från men om du google det du hittar det. Det är hur du åtgärdar problemet (inte testats i jquery 1.4).

Använd denna funktion. Ändra din "fadeOut" till "customFadeOut". Ett urval av Bill's setup kan också ses på demo sidan.

  ( $ ) { (Function ($) (
	 = function ( speed , callback ) { $. Fn. CustomFadeIn = funktion (hastighet, återuppringning) (
		 ) . fadeIn ( speed , function ( ) { $ (This). FadeIn (hastighet, function () (
			 ! $. support . opacity ) if (! $. stöd. opacitet)
				 ) . get ( 0 ) . style . removeAttribute ( 'filter' ) ; $ (This). Get (0). Stil. RemoveAttribute ( "filter");
			 callback != undefined ) if (callback! = undefined)
				 callback ();
		 ));
	 );
	 = function ( speed , callback ) { $. Fn. CustomFadeOut = funktion (hastighet, återuppringning) (
		 ) . fadeOut ( speed , function ( ) { $ (This). FadeOut (hastighet, function () (
			 ! $. support . opacity ) if (! $. stöd. opacitet)
				 ) . get ( 0 ) . style . removeAttribute ( 'filter' ) ; $ (This). Get (0). Stil. RemoveAttribute ( "filter");
			 callback != undefined ) if (callback! = undefined)
				 callback ();
		 ));
	 );
	 = function ( speed , to , callback ) { $. Fn. CustomFadeTo = funktion (hastighet, till, återuppringning) (
		 ( { opacity : to } , speed , function ( ) { återlämna detta. animate ((opacity: att), hastighet, function () (
			 to == 1 && jQuery. browser . msie ) if (i == 1 & & jQuery. webbläsare. MSIE)
				 . removeAttribute ( 'filter' ) ; detta. stil. removeAttribute ( "filter");
			 jQuery. isFunction ( callback ) ) if (jQuery. isFunction (återuppringning))
				 callback ();
		 ));
	 );
 ; )) (JQuery); 

Resurser

Denna webbplats använder IntenseDebate kommentarer, men de är inte laddade för antingen din webbläsare stöder inte JavaScript, eller så laddades inte tillräckligt snabbt.

10 kommentarer

  1. 4:01 AM jQuery fadeIn () & fadeOut () - Bug ingen Internet Explorer »Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards / 11.4.08 / 4:01

    [...] MAS acabei encontrado uma solução muito interessante ingen site de Kevin Leary que consiste simplesmente em adicionar uma cor de fundo ao elemento que será aplicado o [...]

  2. 1:43 PM John / 10.11.09 / 1:43

    Sparat mig mycket tid på detta - tack!

  3. 7:56 PM Alexandre Oliveira / 11.12.09 / 7:56

    Ohhh my! Jag kan inte tro det ...

    IE är alltid förvånande mig.

  4. 10:20 PM @ dangerdave / 12.7.09 / 10:20

    Detta verkade lovande, men jag försökte din demo i IE8 (på Win7) och "vackra" Fade in ser lika trasiga och pixellated som inte-pretty fade-in. Ack.

  5. 11:07 PM kevinlearynet / 12.7.09 / 11:07

    Hej Dave,

    That's too bad - och jag har hört så bra saker med 7. Jag har en kopia av XP och frågan verkar vara fast för båda exemplen på IE8 (även dåliga). Tills jag får en kopia av Windows 7 lastas upp på VMware jag vet inte hur man hjälper den här gången. Under tiden om du eller någon annan tycker är orsaken / lösningen vänligen låta alla veta.

  6. 11:41 AM stefan / 1.4.10 / 11:41

    thanks for this! Det gav mig en huvudvärk för en rättvis några timmar ..

    Cheeeeeeeeeeeers!

  7. 2:35 AM färsk / 1.16.10 / 2:35

    Kevin, thanks for sharing! Men om jag inte kan ställa bg färg, eftersom jag har en komplex bakgrund under på kroppen element? Om jag ställa bg färg, kommer det att se riktigt ful på icke-platt-color bg. Ni vet du någon annan lösning? Även en svår? :-)

  8. 4:23 PM kevinlearynet / 1.19.10 / 4:23

    Kan inte säga att jag vet en fix för det nya, även en tuff en. Du kanske vill överväga att gräva runt stackoverflow.com för några liknande scenarier:

    <a href="http://stackoverflow.com/search?q=jquery+fadeIn+IE"> Stackoverflow.com sökning efter "jQuery fadeIn IE"

    Om du inte hittar något jag skulle skicka en ny post. Stackoverflow har varit otroligt bra för mig, speciellt med avancerade jQuery scenarier som denna.

    Lycka till och tack för inlägg!

  9. 7:24 AM Bill / 1.20.10 / 7:24

    Jag minns inte var jag fick det från men om du google det du hittar det. Det är hur du åtgärdar problemet (inte testats i jquery 1.4).

    Använd denna funktion. Ändra din "fadeOut" till "customFadeOut".

    (function ($) (
    $. fn.customFadeIn = funktion (hastighet, återuppringning) (
    $ (this). fadeIn (hastighet, function () (
    if (! $. support.opacity)
    $ (this). get (0). style.removeAttribute ( "filter");
    if (callback! = undefined)
    callback ();
    ));
    );
    $. fn.customFadeOut = funktion (hastighet, återuppringning) (
    $ (this). fadeOut (hastighet, function () (
    if (! $. support.opacity)
    $ (this). get (0). style.removeAttribute ( "filter");
    if (callback! = undefined)
    callback ();
    ));
    );
    $. fn.customFadeTo = funktion (hastighet, till, återuppringning) (
    return this.animate ((opacity: att), hastighet, function () (
    if (i == 1 & & jQuery.browser.msie)
    this.style.removeAttribute ( "filter");
    if (jQuery.isFunction (återuppringning))
    callback ();
    ));
    );
    )) (jQuery);

  10. 1:04 PM kevinlearynet / 1.20.10 / 1:04

    Tack för den här propositionen, har jag lagt till posten och placerade koden i en källa viewer.

Lämna en kommentar

kommer inte att publiceras

Wrap kodblock med <pre lang="LANGUAGE" line="1"> och </ pre> där språk är ett geshi språk som stöds syntax.