jQuery褪色效果无法按预期工作 [英] jQuery fading effect not working as intended

问题描述

我正在将工作代码从此处修改为更改图片并使其具有淡化效果.

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

这是修改后的代码:

$(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">堆栈底部的图像.有人可以帮忙吗?

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?

推荐答案

这是一种视觉现象，其原因是以下事实:这四个图像都是一个接一个地堆放在一个堆中.

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.

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

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).

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

When you click the Forward button, the first image (bottom of the image pile, i.e. 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.

当您向后点击时，最后一张图像(可见)会淡出(您可以看到)并重新插入为div(prependTo())中的第一张图像，所有其他图像都堆叠在其顶部，因此您看不到插入内容.您所看到的就是淡入淡淡的基础图像.

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.

为改善此问题，请尝试在前进"中添加fadeIn()过渡，因为它将新可见的图像拖到div的底部. (请注意，您不需要在Backward函数上使用fadeIn()方法，因为用户看不到插入内容.)

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>

结果证明，要做需要使用后退"按钮上的fadeIn()来解决用户Obs​​cure指出的缺点.好眼睛.

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

这篇关于jQuery褪色效果无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！