JQuery: animate() funktioniert nicht wie in IE erwartet

Question

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

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

Warum funktioniert die folgende Funktion nicht im IE 7, aber perfekt mit Firefox? Gibt es einen Fehler 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; 
    }); 
} 

Vielen Dank für Ihre Hilfe ...

---

Ihnen sehr danken, die groß waren Hinweise! Leider funktioniert es immer noch nicht ...

Das Problem ist, dass IE den Inhalt beider Container zeigt, bis die Animation vorbei ist ... Firefox verhält sich richtig ... Ich dachte, es ist die Sache mit "Überlauf: versteckt "- aber daran änderte sich nichts.

Ich habe bereits versucht, die Akkordeon-Plugin, aber es verhält sich genau die gleichen ...

Answer 1

Wie von Paul erwähnt, wenn das Verfahren verwendet wird. Animate() jQuery IE7 Browser erkennt intern die Eigenschaft 'position' nicht.

zB

CSS-Regel:

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

Umsetzung der Animation 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 in allen Browsern funktionieren:

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 es auf diese Weise gelöst.

Answer 2

Ich bin nicht sicher, was das Problem ist genau das, ... vielleicht können Sie nicht auf „display: none“ animieren? Versuchen Sie folgendes:

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

... dachte, es ist wie es aussieht, einige andere Probleme mit dem Behälter overflow: hidden Satz nicht mit drauf sein könnte.

Der beste Weg könnte sein, das Rad nicht neu zu erfinden: Das jQuery UI-Plugin verfügt über ein integriertes Akkordeon. http://docs.jquery.com/UI/Accordion Ich bin sicher, der ehrenwerte Mr. Resig & Co hat sich bereits mit den Bugs auseinandergesetzt, die Ihnen vielleicht begegnen.

Answer 3

Sie können den jQuery-Selektor verwenden: sichtbar, statt die isVisible-Klasse umzuschalten.

Auch Ihre Animation scheint funktional die gleiche wie SlideUp (1000).

Answer 4

Ich hatte kürzlich ein Problem, wo animate() nicht wie erwartet funktionierte und es auf IE zurückzuführen war, die meine css padding: -Eigenschaften anders als FireFox rendert.

Dies schien mit anderen Menschen passiert zu sein, und ich musste in meinem css herumhacken; Verwenden Sie stattdessen Ränder und feste Breiten und andere solche schrecklichen IE-Hacks.

Answer 5

Ich stieß auf ein ähnliches Problem mit der Animate-Funktion und war überrascht, als es den Fehler aus der Core-jQuery-Bibliothek zeigte. Wie auch immer, jQuery ist in Ordnung, sein IE müssen Sie berücksichtigen.

Wenn Sie ein beliebiges Attribut eines Elements in IE animieren, müssen Sie sicherstellen, dass es in Ihrem CSS einen Ausgangspunkt für das Attribut gibt, das Sie ändern möchten. Dies gilt auch für Safari.

Als Beispiel ein div kontinuierlich nach links bewegt,

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 Ausgangsposition NICHT in einer linken & oben setzen IE wird schließlich einen Fehler werfen.

this helps

Answer 6

Ändern Sie Ihre Dauer für IE. Machen Sie es 1/10, was würden Sie in FF, und es sollte in beiden Browsern auf das gleiche Verhalten der Nähe:

FF

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

IE

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

Sollte es beheben.

Answer 7

Das ist vielleicht ein Thema, aber ich spiele mit JQuery und es ist toll, aber ich bin neu in Javascript Ich habe nicht erkannt, dass IE 7 und IE 8 das const-Schlüsselwort nicht erkennen. Das war, was mein JQuery davon abhielt, kein Problem mit der Animation zu laufen ... das könnte einer verzweifelten Seele helfen. Mann Ich kann es kaum erwarten, wieder zu guten alten AS3 und Flex ..

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

für mehr

Answer 8

Nach einem Tag fragen, warum IE nicht Sachen animieren fand ich, dass einige Versionen von JQuery nicht das Ding mehr tun, dass sie verwendet:

Dies:

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

wird nicht mit diesem Jquery arbeiten: 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 alten Versionen!