JQuery: animate () funktioniert nicht wie in IE erwartet

StackOverflow https://stackoverflow.com/questions/333911

Frage

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

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

Warum folgende Funktion funktioniert nicht in IE 7, aber perfekt mit Firefox? Gibt es einen Fehler in der beseelten-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 ...

Vielen Dank, das waren große Hinweise! Leider ist es immer noch nicht funktioniert ...

Das Problem ist, dass der IE den Inhalt der beiden Behälter zeigt, bis die Animation vorbei ... Firefox verhält sich richtig ... Ich dachte, es ist die Sache mit „overflow: hidden.“ - aber das hat nichts ändern

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

War es hilfreich?

Lösung

Wie bereits erwähnt von Paul, wenn das Verfahren verwendet wird. Animieren () jQuery IE7 Browser erkennt nicht intern die Eigenschaft ‚Position‘. zB

CSS-Regel: 

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

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

Andere Tipps

stieß ich auf ein ähnliches Problem mit der beseelten Funktion und war überrascht, als es den Fehler zeigt, die von der Core-Bibliothek jQuery kommen. jQuery ist jedoch in Ordnung, seine IE Sie brauchen für gerecht.

Wenn alle Attribute eines Elements in IE Animieren, müssen Sie sicherstellen, dass in Ihrem CSS gibt es einen Ausgangspunkt für das Attribut, das Sie ändern wollen. Dies gilt auch für Safari.

Als Beispiel eines 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 nicht in einer linken und oberen Ausgangsposition wird IE setzen Sie schließlich einen Fehler aus.

Hope, das hilft

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

Dieses: 

$('#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 alte Versionen!

Sie könnten die Verwendung des jQuery-Selektor machen: sichtbar, anstatt die isVisible Klasse Makel

.

Auch die Animation scheint funktionell die gleiche wie slideUp (1000).

hatte ich ein Problem vor kurzem, wo belebte () wurde nicht wie erwartet funktioniert und es war bis auf IE meines CSS padding-Rendering. Eigenschaften unterschiedlich auf FireFox

Dies schien zu anderen Menschen zu geschehen, und ich hatte in meinem CSS-Hack um; mit Margen und feste Breiten und andere solche schrecklichen IE-Hacks, statt.

Diese vom Thema sein könnte, aber ich bin Herumspiele mit JQuery und seinem großen, aber neu in Javascript zu sein habe ich nicht erkennen, dass IE 7 und IE 8 nicht das Schlüsselwort const erkennen. Das ist, was meine JQuery anhielt vom Laufen kein Problem mit Animation ..hope, die etwas desparate Seele helfen könnte. Mann kann ich nicht zurück nach good ol AS3 und Flex zu erhalten warten ..

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

für mehr

Ä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 von:

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.

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

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

... dachte, es sieht aus wie könnte es einige andere Probleme mit dem Behälter, nicht mit overflow: hidden auf sie gesetzt.

Der beste Weg könne sein, neu zu erfinden das Rad zu vermeiden: die jQuery UI-Plugin hat ein Akkordeon eingebaut. http://docs.jquery.com/UI/Accordion Ich bin sicher, dass sich der Herr Herr Resig & Co haben bereits behandelt mit dem, was Fehler, die Sie vielleicht stoßen werden.

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