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

Question

I am modifying the working code from here to change image with fading effect on click.

This is the modded 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 placed into function Backward() works properly. However, the modified function Forward() does not seem to work right. The fading effect is not observed. Also, I don't quite get why the image shown is the one at the bottom of the stack of <div class="frame"> . Could someone help?

Answer 1

This is a visual phenomenon caused by the fact that the four images are all piled one-on-top-of-the-other, in a stack.

Because the parent div is styled relative and each image is absolute, the images all sit on top of each other, with the last image being the only visible one (because the other 3 images are underneath it).

When you click the Forward button, the first image (bottom of the image pile, ie invisible) is faded out (which you cannot see, because it is at the bottom of the pile) and re-inserted PLOP! as the last element in the div ( appendTo() ) - which makes it the final absolutely-positioned image, therefore top-of-the-pile, which makes it visible all-of-a-sudden.

When you hit backwards, the last image (visible) is faded out (which you CAN see) and reinserted as the first image in the div ( prependTo() ), with all the other images piled on top of it, so you cannot see the insertion. All you see is the nice, gentle, fade-out into the underlying image.

To improve this, try adding a fadeIn() transition to the Forward as it plops the newly-visible image onto the bottom of the div. (Note that you don't need the fadeIn() method on the Backward func, because the insertion is not visible to the user.)

 $(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>

Update:

Turns out you do need the fadeIn() on the Back button to address the shortcoming pointed out by user Obscure. Good eye.

Answer 2

I change cssyphus 's code as follows and the fading speed back and forth seems rather even:

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