jQuery UI Switch Class Animation nicht animiert in Safari / Chrome - aber animiert in Firefox?

Question

http://jsfiddle.net/motocomdigital/b22Yt/1/

Ich versuche, eine grundlegende Animation für absolute div Positionierung innerhalb einer Box zu tun, wenn div schwebte ist.

Wenn der Mauszeiger über div schwebt, sollte sich div.inside von oben nach unten bewegen. Klassen verwenden. Der Insider-Box ist dynamisch daher, warum ich hatte, um die UI Weg zu verwenden.

Voir jsフィドル um zu testen, was passiert. In Firefox wird es animiert. In Safari und Chrome tut es das nicht? Seltsam, ich habe den IE noch nicht getestet, da ich einen Mac verwende.

Ich habe die Schalterklasse src von hier http://jqueryui.com/docs/switchClass/

Habe ich etwas falsch gemacht in meinem Code? sogar in Firefox theres ein wenig jumpiness going on.

Jede professionelle Hilfe wäre nett, danke!

http://jsfiddle.net/motocomdigital/b22Yt/1/

Markup

<div class="box">

    <div class="inside bottom">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi purus, tincidunt sit amet aliquet quis, semper vel urna. Morbi mollis nulla nisi, ut euismod elit. Nam et arcu velit, id faucibus velit. Sed blandit feugiat quam, nec laoreet nisl suscipit quis.

    </div>

</div>

CSS

.box {
    width: 200px;
    height: 200px;
    background: red;
    float: left;
    margin: 10px;
    overflow: hidden;
    position: relative;
}

.inside {
    position: absolute;
    background: black;
    color: #ffffff;
    font-size: 10px;
    overflow: hidden;
    padding: 10px;
    width: 180px;
    word-wrap: break-word;
}

.top {
    top: 0;
}

.bottom {
    bottom: 0;
}

SCRIPT

$(".box").hover(function(){

     $(this).children(".inside").switchClass( "bottom", "top", 300 );

 }, function() {

     $(this).children(".inside").switchClass( "top", "bottom", 300 );

});

Answer 1

Wenn Sie die UI switchClass-Methode für die Animation verwenden, sollten Sie immer dieselben CSS-Selektoren in beiden Klassen verwenden, da jQuery UI etwas zum Vergleich benötigt.

Mit anderen Worten, wenn die Klassen wie folgt aussehen:

.top {top: 0;}
.bottom {top: 200px;}

die Animation wird browserübergreifend gut funktionieren, aber wenn die Klassen wie aussehen:

.top {top: 0;}
.bottom {bottom: 0;}

jQuery wird Schwierigkeiten haben, diese beiden Werte zu vergleichen und eine Animation zwischen ihnen zu erstellen. Probieren Sie es aus und Sie werden sehen.

Für Ihr spezielles Beispiel brauchen Sie jQuery UI eigentlich gar nicht, und es scheint ein seltsamer Weg zu sein, um so etwas Grundlegendes wie die Animation eines Elements nach oben/unten zu tun.

Ich würde es stattdessen so machen:

$(".box").each(function() {
    var self = $(this),
        child = self.children('.inside'),
        _top = parseInt(self.css('height')) - parseInt(child.css('height')) - 20; //  -20 for padding
        child.css({top: _top});
        $(this).data('_top', _top);
});

$(".box").hover(function(){
    $(this).children(".inside").stop(true, true).animate({top: 0}, 300);
 }, function() {
    $(this).children(".inside").stop(true, true).animate({top: $(this).data('_top')}, 300);
});

Keine Notwendigkeit für Klassen oder etwas anderes, geradeaus, hier ist ein fiddle, um es in Aktion zu zeigen: http://jsfiddle.net/b22Yt/4/