Javascript jQuery淡入淡出效果未按预期工作

我正在修改中的工作代码，以便在单击时更改具有淡入效果的图像

这是修改后的代码：

$（函数（）{
$（“输入：按钮”）。单击（函数（）{
$（“img:last”）.fadeToggle（“慢”，函数（）{
$（this.prependTo（“.frame”）.show（）
});
});
});
函数Forward（）{
$（“img:first”）.fadeToggle（“慢”，函数（）{
$（this.appendTo（“.frame”）.show（）
});
}
函数向后（）{
$（“img:last”）.fadeToggle（“慢”，函数（）{
$（this.prependTo（“.frame”）.show（）
});
}

.frame{
位置：相对位置；
左：35%；
}
img{
位置：绝对位置；
最大宽度：30%；
}

前进
倒退

这是一种视觉现象，其原因是四个图像都是一个叠在另一个上面，形成一个堆栈

因为父div的样式是相对的，每个图像都是绝对的，所以所有图像都位于彼此的顶部，最后一个图像是唯一可见的图像（因为其他3个图像位于其下方）

单击“前进”按钮时，第一个图像（图像堆的底部，即不可见）将淡出（您无法看到，因为它位于图像堆的底部），然后重新插入扑通一声！作为div（

appendTo（）

）中的最后一个元素，这使它成为最终绝对定位的图像，因此位于堆的顶部，这使它突然可见

向后点击时，最后一个图像（可见）淡出（您可以看到），并作为div中的第一个图像重新插入（

prependTo（）

），所有其他图像都堆在上面，因此您无法看到插入。你所看到的一切都是美好的，温柔的，淡出到底层的图像中

要改善这一点，请尝试向前进方向添加一个

fadeIn（）

转换，因为它会将新可见的图像扑通一声放到div的底部。（请注意，在后退功能上不需要

fadeIn（）

方法，因为用户看不到插入。）

$（函数（）{
$（“输入：按钮”）。单击（函数（）{
$（“img:last”）.fadeToggle（“慢”，函数（）{
$（this.prependTo（“.frame”）.fadeIn（）
});
});
});
函数Forward（）{
$（“img:first”）.fadeToggle（“慢”，函数（）{
$（此）.appendTo（“.frame”）.fadeIn（800）
});
}
函数向后（）{
$（“img:last”）.fadeToggle（“慢”，函数（）{
$（this.prependTo（“.frame”）.fadeIn（）
});
}

.frame{
位置：相对位置；
左：35%；
}
img{
位置：绝对位置；
最大宽度：30%；
}

前进
倒退
我将
cssyphus
的代码更改如下，前后的衰减速度似乎相当均匀：

function Forward() {
    $("img:first").fadeToggle(150, function() {
        $(this).appendTo(".frame").fadeIn(450)
    });
}
function Backward() {
    $("img:last").fadeToggle(600, function() {
        $(this).prependTo(".frame").show()
    });
}

感谢您的专家见解。我可以问一下你花了多长时间才获得这些知识吗？我是web开发新手。虽然这是一个很好的解释@cssyphus，但是如果用户先向后再向前点击，您的解决方案将失败。@晦涩，cssyphus现在代码已经修改，您能解释一下为什么旧代码会在第一次向后+向前点击时失败吗？我在Chrome上没有经历过这种失败。@cssyphus，有没有办法利用
img
的相对位置来做到这一点？将它们设置为绝对值会使我的当前页面演示文稿失效。