j查询淡入淡出效果未按预期工作

Question

我正在从这里修改工作代码以更改具有单击时淡入淡出效果的图像。

这是修改后的代码：

$(function() {
$("input:button").click(function() {
$("img:last").fadeToggle("slow", function() {
$(this).prependTo(".frame").show()
});
});
});
function Forward() {
$("img:first").fadeToggle("slow", function() {
$(this).appendTo(".frame").show()
});
}
function Backward() {
$("img:last").fadeToggle("slow", function() {
$(this).prependTo(".frame").show()
});
}

.frame {
position: relative;
left: 35%;
}
img {
position: absolute;
max-width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h1>
<input type="button" value="PrependTo" />
<button onclick="Forward()">Go Forward</button>
<button onclick="Backward()">Go Backward</button>
</h1>
<div class="frame">
<img src="img/home-00.jpg">
<img src="img/home-01.jpg">
<img src="img/home-02.jpg">
<img src="img/home-03.jpg">
</div>

放入函数Backward()正常工作的原始代码。 但是，修改后的函数Forward()似乎无法正常工作。 未观察到褪色效果。另外，我不太明白为什么显示的图像是<div class="frame">堆栈底部的图像。有人可以帮忙吗？

Answer 1

这是一种视觉现象，因为四个图像都

一一叠地堆放在一起。由于父div 的样式是相对的，并且每个图像都是绝对的，因此所有图像都位于彼此之上，最后一个图像是唯一可见的图像(因为其他 3 个图像位于其下方(。

当您单击"前进"按钮时，第一个图像(图像堆的底部，即不可见(被淡出(您看不到，因为它位于堆的底部(并重新插入PLOP！作为div(appendTo()(中的最后一个元素 - 这使它成为最终绝对定位的图像，因此是堆顶，这使得它突然可见。

当您向后点击时，最后一个图像(可见(会淡出(您可以看到(并作为div (prependTo()的第一个图像重新插入，所有其他图像都堆在它上面，因此您看不到插入。你看到的只是漂亮、柔和、淡出到底层图像中。

若要改善这一点，请尝试向 Forward 添加一个fadeIn()过渡，因为它会将新可见的图像放到div 的底部。(请注意，您不需要向后功能上的fadeIn()方法，因为插入对用户不可见。

$(function() {
$("input:button").click(function() {
$("img:last").fadeToggle("slow", function() {
$(this).prependTo(".frame").fadeIn()
});
});
});
function Forward() {
$("img:first").fadeToggle("slow", function() {
$(this).appendTo(".frame").fadeIn(800)
});
}
function Backward() {
$("img:last").fadeToggle("slow", function() {
$(this).prependTo(".frame").fadeIn()
});
}

.frame {
position: relative;
left: 35%;
}
img {
position: absolute;
max-width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>
<input type="button" value="PrependTo" />
<button onclick="Forward()">Go Forward</button>
<button onclick="Backward()">Go Backward</button>
</h1>
<div class="frame">
<img src="http://placeimg.com/240/180/animals">
<img src="http://placeimg.com/240/180/nature">
<img src="http://placeimg.com/240/180/people">
<img src="http://placeimg.com/240/180/sepia">
</div>

更新：

事实证明，您确实需要"后退"按钮上的fadeIn((来解决用户Obscure指出的缺点。好眼力。

Answer 2

我按如下方式更改cssyphus的代码，来回衰减的速度似乎相当均匀：

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