I've made some changes to the code found on this page in order to switch images with a fading effect when clicked.
Here is the modified code:
$(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>The original code, which is triggered by the Backward() function, functions correctly. However, the updated Forward() does not seem to be working as expected. The fading effect is not displaying properly. Additionally, I am confused as to why the image shown is always the one at the bottom of the stack within the <div class="frame"> element. Can anyone provide assistance?