Абсолютные прыжки с позиции во время анимации jquery

Question

Абсолютные прыжки с позиции во время анимации jquery

0

Я использую шкалу jQuery UI для масштабирования изображений в цепочке анимации, и цепочка анимации работает очень хорошо, у меня есть одно изображение стрелки, которое позиционируется как absolute и назначенное top и right свойство, но по мере продвижения цепочки изображение скачки вместо оживления в том самом месте, я думаю, что это имеет какое-то отношение к display: none; , позже у меня будут сотни absolute элементов, я был бы признателен, если кто-нибудь объяснит мне, почему это происходит.

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

Вот что я пробовал

$(document).ready(function() {
    $(".three_circular_img ul li:nth-of-type(1) img:nth-of-type(1)").show("scale", {percent: 100}, function(){
        $(".three_circular_img ul li:nth-of-type(2) img:nth-of-type(1)").show("scale", {percent: 100}, function(){
            $(".three_circular_img ul li:nth-of-type(3) img:nth-of-type(1)").show("scale", {percent: 100}, function(){
                $(".three_circular_img ul li:nth-of-type(1) img:nth-of-type(2)").show("scale", {percent: 100}, function(){

                }, 1000);
            }, 1000);
        }, 1000);
    }, 1000);
});

Соответствующий CSS

.three_circular_img ul li img:nth-of-type(2) {
    position: absolute;
    right: -80px;
    top: 10px;
}

демонстрация

Blowfish 04 янв. 2014, в 16:54

Источник

Теги:

jquery

html

css

jquery-ui

1 ответ

Ещё вопросы

Rohan Kumar · Accepted Answer · 2014-01-04T13-18-00.000Z

Постарайтесь, чтобы скрыть li's не li img's как,

CSS

.three_circular_img ul li {
    margin-bottom: 40px;
    position: relative;
    display: none;
}
.three_circular_img ul li img {
}

SCRIPT

$(document).ready(function () {
    $(".three_circular_img ul li:nth-of-type(1)").show("scale", {
        percent: 100
    }, function () {
        $(".three_circular_img ul li:nth-of-type(2)").show("scale", {
            percent: 100
        }, function () {
            $(".three_circular_img ul li:nth-of-type(3) ").show("scale", {
                percent: 100
            }, function () {}, 1000);
        }, 1000);
    }, 1000);
});

демонстрация

Обновлено Чтобы показать arrow после того, как все demo images попробуют это,

CSS

.three_circular_img ul li img:nth-of-type(2) {
    position: absolute;
    right: -80px;
    top: 10px;
    display:none;
}

SCRIPT

$(".three_circular_img ul li:nth-of-type(1) img:eq(1) ").show(1000);

Обновленная демоверсия

Спасибо за ответ, но стрелка загружается с первым изображением, тогда как я анимирую изображения в рамке, а затем помещаю стрелку
@Blowfish посмотрите мой обновленный ответ и демо
Спасибо, чертовски много, что ты там сделал, но?