jquery - position absolute 跳转到jquery动画时的位置

Question

我正在使用 jQuery UI scale 来缩放图像，在动画链中，链工作得很好，我有一个箭头图像，它定位在 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;
}

Demo

Answer 1

尝试隐藏li的而不是li img的，

CSS

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

脚本

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

Demo

已更新要在所有演示图像之后显示箭头，试试这个，

CSS

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

脚本

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

Updated Demo