JQuery: animate() funktioniert nicht wie erwartet in Internet Explorer

Ich bin immer verrückt mit diesem IE 7...

==> http:://neu.emergente innovation.com/

Warum funktioniert folgende Funktion nicht funktionieren im IE 7, aber perfekt mit Firefox? Ist es ein bug in der animate-Funktion?

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;
    });
}

Danke Ihnen sehr für Ihre Hilfe...

Vielen Dank, das waren tolle Tipps! Leider, es funktioniert immer noch nicht...

Das problem ist, dass der IE zeigt den Inhalt der beiden Container, bis die animation vorbei ist... Firefox verhält sich korrekt... ich dachte, es ist die Sache mit "overflow: hidden" - aber das ging nicht, irgendetwas zu ändern.

Ich habe bereits versucht das Akkordeon-plugin, aber es verhält sich genau das gleiche...

so was bekommen Sie und was erwarten Sie?
Ich erwarte, dass es sich so verhält, wie Firefox: dass die Container-Inhalte sind abgedeckt und zeigte während der animation. IE7 zeigt sofort die "neuen" content und zeigt den "alten" Inhalt, bis die animation fertig ist...
vier-ohhhh-vier

InformationsquelleAutor swalkner | 2008-12-02

Wie gesagt von Paul, bei der Verwendung der Methode. Animate () von jQuery IE7 browser nicht erkennt intern die Eigenschaft 'position'. zB

CSS-Regel:

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

Umsetzung von Animationen 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()

Was funktioniert in allen Browsern:

CSS-Regel:

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

JQuery-code:

   $('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()

In meinem Fall wurde dieses Problem gelöst, Weg.

InformationsquelleAutor Tadeu Luis

8

Stieß ich auf ein ähnliches problem mit der animate-Funktion und war überrascht, als es war, zeigt die Fehler kommen aus der core-Bibliothek jQuery. Aber jQuery ist in Ordnung, seine DH Sie müssen betreut werden.

Wenn animieren jedes Attribut eines Elements im IE, müssen Sie sicherstellen, dass in deinem CSS gibt es einen Ausgangspunkt für das Attribut, das Sie gehen zu ändern. Dies gilt auch für Safari.

Als ein Beispiel, das verschieben eines div ständig auf der linken Seite,

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; }
```
Wenn Sie NICHT in einer linken & top-Ausgangsposition, DH irgendwann werfen einen Fehler.

Hoffe, das hilft

InformationsquelleAutor
1

Nach einem Tag sich zu Fragen, WARUM IE nicht animiert Sachen, die ich gefunden, dass einige Versionen von JQuery nicht mehr tun, die Sache, die Sie verwendet, um:

:
```
$('#bs1').animate({
    "left": bs1x
}, 300, function() {
    //Animation complete.
});
```
funktioniert NICHT mit diesem Jquery:
https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

aber es funktioniert mit:
https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

Hurra, die alte Versionen!

Ich habe bemerkt das gleiche. Versucht, ein upgrade auf jQuery 1.7.1 und es ist das gleiche problem.

InformationsquelleAutor Mladen
0

Könnten Sie machen verwenden der jQuery-selector :sichtbar anstatt immer die isVisible-Klasse.

Auch die animation scheint funktional das gleiche wie slideUp(1000).

InformationsquelleAutor Simon
0

Ich hatte ein problem vor kurzem wo animate() nicht funktioniert wie erwartet, und es wurde auf die IE-rendering-meine css-Polsterung: Eigenschaften anders zu FireFox.

Diesem zu haben schien, zu anderen Menschen passiert, und ich hatte zu hacken, um in mein css; mit Margen und eine Feste Breite und andere schreckliche IE hacks, statt.

InformationsquelleAutor adam
0

Dies ist möglicherweise off-topic, aber ich bin Herumspielen mit JQuery und seine große, aber mit Javascript ich nicht erkennen, dass IE 7 und IE 8 erkennen nicht das const-Schlüsselwort . Das ist, was hielt mein JQuery-vom laufen nicht ein problem mit der animation ..hoffe, das könnte helfen, einige verzweifelten Seele. Mann ich kann nicht warten, um wieder nach good ol AS3 und Flex..

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

weitere

InformationsquelleAutor dave
0

Ändern Ihre Dauer für den IE. Machen es die 1/10tel, was man in FF ein, und es sollte in der Nähe sein, um das gleiche Verhalten in beiden Browsern:

FF
```
$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 200});
```
IE
```
$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 20});
```
Problem beheben sollte.

InformationsquelleAutor John K
0

Ich bin mir nicht sicher, was das problem genau ist... vielleicht kann man das nicht animieren "display: none" ? Versuchen Sie dies:
```
toHide.animate({ height : 0 }, 1000, function() { $(this).hide(); });
```
...dachte, es sieht aus wie es könnte einige andere Probleme mit dem container, nicht mit overflow: hidden festgelegt sind.

Der beste Weg sein könnte, um zu vermeiden, das Rad neu erfinden möchte: die jQuery-UI-plugin hat ein Akkordeon eingebaut. http://docs.jquery.com/UI/Accordion Ich bin sicher, der ehrenwerte Herr Resig & Co haben bereits behandelt, was Fehler, die Sie möglicherweise stoßen werden.

InformationsquelleAutor nickf

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.