JQuery: animate () non funziona come previsto in IE

Question

Sto diventando pazzo con questo IE 7 ...

== > hhttp: //neu.emergent-innovation.com/

Perché la seguente funzione non funziona in IE 7, ma perfettamente con Firefox? C'è un bug nella funzione animata?

function accordion_starting_page(){
    // hide all elements except the first one
    $('#FCE-Inhalt02-ContentWrapper .FCE-Fade:not(:first)').css("height", "0").hide();
    $('#FCE-Inhalt02-ContentWrapper .FCE-Fade:first').addClass("isVisible");

    $('div.FCE-Title').click(function(){

        // if user clicks on an already opened element => do nothing
        if (parseFloat($(this).next('.FCE-Fade').css("height")) > 0) {
            return false;
        }

        var toHide = $(this).siblings('.FCE-Fade.isVisible');

        toHide.removeClass("isVisible");

        // close all opened siblings
        toHide.animate({"height": "0", "display": "none"}, 1000);

        $(this).next('.FCE-Fade').addClass("isVisible").animate({"height" : "200"}, 1000);

        return false;
    });
}

Grazie mille per il tuo aiuto ...

---

Grazie mille, erano ottimi suggerimenti! Sfortunatamente, non funziona ancora ...

Il problema è che IE mostra il contenuto di entrambi i contenitori fino a quando l'animazione non è finita ... Firefox si comporta correttamente ... Ho pensato che fosse la cosa con "overflow: nascosto". - ma questo non ha cambiato nulla.

Ho già provato il plugin per fisarmonica, ma si comporta esattamente allo stesso modo ...

Answer 1

Come affermato da Paul, quando si utilizza il metodo. Animate () Il browser jQuery IE7 non riconosce internamente la 'posizione' della proprietà. ad esempio

Regola CSS:

li p (bottom:-178px; color: white; background-color: # 4d4d4d; height: 100%; padding: 30px 10px 0 10px;)

Implementazione dell'animazione in jQuery:

$('li').hover(function(){

              $this = $(this);

              var bottom = '-45px'; //valor default para subir.

              if( $this.css('height') == '320px' ){bottom = '-115px';}

              $this.css('cursor', 'pointer').find('p').stop().find('.first').hide().end().animate({bottom: bottom}, {queue:false, duration:300});

      }, function(){

         var $this = $(this);

         var bottom = '-178px'; //valor default para descer

            if( $this.css('height') == '320px' ){bottom = '-432px';}

         $this.find('p').stop().animate({***position: 'absolute'***, bottom:bottom}, {queue:false, duration:300}).find('.first').show();

      });//fim do hover()

Cosa lavorare in tutti i browser:

Regola CSS:

li p (position: absolute; left: 0; bottom:-178px; color: white; background-color: # 4d4d4d; height: 100%; padding: 30px 10px 0 10px;)

Codice JQuery:

   $('li').hover(function(){

                 $this = $(this);

         var bottom = '-45px'; //valor default para subir.

              if( $this.css('height') == '320px' ){bottom = '-115px';}

              $this.css('cursor', 'pointer').find('p').stop().find('.first').hide().end().animate({bottom: bottom}, {queue:false, duration:300});

      }, function(){

         var $this = $(this);

         var bottom = '-178px'; //valor default para descer

            if( $this.css('height') == '320px' ){bottom = '-432px';}

         $this.find('p').stop().animate({bottom:bottom}, {queue:false, duration:300}).find('.first').show();

      });//fim do hover()

Nel mio caso è stato risolto in questo modo.

Answer 2

Mi sono imbattuto in un problema simile con la funzione animata e sono rimasto sorpreso quando mostrava l'errore proveniente dalla libreria jQuery principale. Comunque jQuery va bene, è IE che devi soddisfare.

Quando si anima qualsiasi attributo di un elemento in IE, è necessario assicurarsi che nel CSS sia presente un punto di partenza per l'attributo che si intende modificare. Questo vale anche per Safari.

Ad esempio, spostando continuamente un div a sinistra,

JQuery:

var re = /px/;
var currentLeft = $("#mydiv").css('left').replace(re,'') - 0;
$("#mydiv").css('left',(currentLeft-20)+'px');

CSS:

#mydiv { position: absolute;    top: 0;    left: 0; }

Se NON inserisci un sinistro & amp; posizione di partenza superiore IE alla fine genererà un errore.

Spero che questo aiuti

Answer 3

Dopo una giornata in cui mi chiedevo PERCHÉ IE non animerà le cose, ho scoperto che alcune versioni di JQuery non fanno più ciò che erano solite:

Questa:

$('#bs1').animate({
    "left": bs1x
}, 300, function() {
    // Animation complete.
});

NON funzionerà con questo Jquery: https://ajax.googleapis.com/ajax/libs /jquery/1.6.1/jquery.min.js

ma funziona con: https://ajax.googleapis.com/ajax/libs /jquery/1.4.4/jquery.min.js

evviva vecchie versioni!

Answer 4

È possibile utilizzare il selettore jQuery: visibile anziché attivare / disattivare la classe isVisible.

Anche l'animazione sembra funzionalmente uguale a slideUp (1000).

Answer 5

Di recente ho avuto un problema a causa del quale animate () non funzionava come previsto e dipendeva da IE che rendeva il mio riempimento CSS: proprietà diverse da FireFox.

Questo sembrava essere successo ad altre persone, e ho dovuto hackerare il mio CSS; usando invece margini e larghezze fisse e altri orribili hack di IE.

Answer 6

Questo potrebbe essere fuori tema, ma sto giocando con JQuery ed è fantastico, ma essendo nuovo a Javascript non ho realizzato che IE 7 e IE 8 non riconoscono la parola chiave const. Questo è ciò che stava impedendo al mio JQuery di funzionare non è un problema con l'animazione ... spero che possa aiutare qualche anima disperata. amico, non vedo l'ora di tornare al buon vecchio AS3 e Flex ..

vedi http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/JSConstKeyword.html

per di più

Answer 7

Modifica la durata per IE. Rendi 1/10 di quello che faresti in FF e dovrebbe essere vicino allo stesso comportamento in entrambi i browser:

FF

$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 200});

IE

$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 20});

Dovrebbe risolverlo.

Answer 8

Non sono sicuro di quale sia esattamente il problema ... forse non puoi animare " display: none " ? Prova questo:

toHide.animate({ height : 0 }, 1000, function() { $(this).hide(); });

... pensato, sembra che potrebbero esserci altri problemi con il container che non ha overflow: nascosto impostato su di esso.

Il modo migliore potrebbe essere quello di evitare di reinventare la ruota: il plug-in dell'interfaccia utente jQuery ha una fisarmonica integrata. http://docs.jquery.com/UI/Accordion Sono sicuro che l'onorevole signor Resig & amp; Co ha già affrontato tutti i bug che potresti riscontrare.