jQuery UI Switch Class Анимация не анимируется в Safari / Chrome - но анимируется в Firefox? - PullRequest
Новая
       11

jQuery UI Switch Class Анимация не анимируется в Safari / Chrome - но анимируется в Firefox?

2 голосов
/ 05 декабря 2011

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

Я пытаюсь сделать базовую анимацию для абсолютного позиционирования div внутри коробки, когда div находится в подвешенном состоянии.

Когда div находится внутри, div.inside должен анимироваться сверху вниз. Использование классов. Инсайдерская коробка динамична, поэтому мне пришлось использовать способ пользовательского интерфейса.

См. jsFiddle , чтобы проверить, что происходит. В Firefox его оживляет. В сафари и хроме это не так? Странно, я еще не тестировал IE, так как я на Mac.

Здесь я получил класс переключателя src http://jqueryui.com/docs/switchClass/

Что-то не так в моем коде? даже в Firefox происходит небольшая нервозность.

Любая профессиональная помощь была бы сладкой, спасибо!

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

Разметка 

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

});

1 Ответ

3 голосов
/ 05 декабря 2011

При использовании метода UI switchClass для анимации вы всегда должны использовать одни и те же селекторы CSS в обоих классах, так как для jQuery UI потребуется что-то для сравнения.

Другими словами, если классы выглядят так: 

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

анимация будет отлично работать в разных браузерах, но если классы выглядят так: 

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

У jQuery возникнут проблемы при сравнении этих двух значений и создании анимации между ними. Попробуйте, и вы увидите.

Для вашего конкретного примера вам совсем не нужен пользовательский интерфейс jQuery, и это кажется странным способом сделать что-то простое, например, анимировать элемент вверх / вниз.

Я бы сделал это так: 

$(".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);
});

Нет необходимости в классах или чем-то еще, прямо, вот скрипка, чтобы показать это в действии: http://jsfiddle.net/b22Yt/4/

...