Question

我（且需要）一个点击循环显示图片，并为此使用以下代码：

$(".wrapper").on("click", function() {

    var $content = $(this).find(".content_stack");

    if ($content.length > 1) {

        var $curr = $content.filter(":visible");
        var $next = $curr.is($content.last()) ? $content.first() : $curr.next();

        $curr.fadeOut(1000, function() {
            $next.fadeIn(1000)
        })
    }
});

^ JSFiddle

我还在SO上（并“适应”了）一个自动“双胞胎”：

$(".wrapper").each(function() {

  var $crossfade = $(this).find(".crossfade_square");
  var $zindex = -1;

  function loop() {
    ++$zindex;
    $crossfade.eq($zindex % $crossfade.length)
      .fadeIn(1000)
      .delay(2000)
      .fadeOut(1000, loop);
  }
  loop();
});

^ JSFiddle

更新：两者均按预期工作，分别工作。我都需要它们（单击图像和循环图像的自动版本）。代码是如此不同，因为我无法调整它们在两种情况下都可以使用。：|

问题：完全淡出>>淡入看起来过于分散注意力/“闪烁” /“突然出现”。

如果有人可以帮助我使交叉淡化更平滑/更微妙/ ...就像一张图像正在变成另一张图像... （如果有可能不添加绝对/相对图像的话），我将不胜感激。在CSS中的位置）。

Answer 1

~~使用一个函数来循环和处理click事件。~~
我将动画分成具有功能队列的功能。如果.onclick调用了FadeIn，则通过.stop(true)方法清除队列以停止动画并放下队列。

$(".wrapper").each(function() {
    var $this = $(this),
        $curr = null,
        $crossfade = $this.find(".crossfade_square");
    var zindex = -1,
        length = $crossfade.length;

    function fadeOut() {
        if($curr)
        $curr.stop(true, false)
            .fadeOut(1000, fadeIn);
        else
            fadeIn();
    }

    function fadeIn() {
       ++zindex;
       $curr = $crossfade.eq(zindex % length)
           .fadeIn(1000)
           .delay(5000)
           .queue(fadeOut);
  }

  $this.on("click", fadeOut);

  fadeIn();

});

我已经更新了JSFiddle示例。

jQuery需要更平滑的淡入淡出效果

1 个答案: