2

我有一个“幻灯片”……之类的。我正在尝试让一个 div 淡出，然后另一个 div 淡入。

问题是，可见 div 在新 div 出现之前并没有完全消失。这会导致两个 div 同时出现的尴尬闪光。

注意：我不能使用绝对定位堆叠 div，因为我希望包装器（父）div 随内容一起扩展。当我通过绝对定位将 div 从“流”中取出时，我似乎无法实现这一点。

JSfiddle：在这里。

这是html：

<a href="#" class="red">RED</a> 
<a href="#" class="blue">BLUE</a> 
<a href="#" class="green">GREEN</a> 
<a href="#" class="yellow">YELLOW</a>
<div id="red"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="yellow"></div>

...CSS...

#red, #blue, #green, #yellow{display:none; width:200px; height:200px;}
#red{background:red;}
#blue{background:blue;}
#green{background:green;}
#yellow{background:yellow;}

...和 ​​JQuery。

$('a.red').click(function() {
  $("#blue, #green, #yellow").hide('fade', function() {
      $("#red").show('fade');
  });
});

$('a.blue').click(function() {
  $("#red, #green, #yellow").hide('fade', function() {
      $("#blue").show('fade');
  });
});

$('a.green').click(function() {
  $("#red, #blue, #yellow").hide('fade', function() {
      $("#green").show('fade');
  });
});

$('a.yellow').click(function() {
  $("#red, #blue, #green").hide('fade', function() {
      $("#yellow").show('fade');
  });
});

我一直在摆弄这个！任何帮助将非常感激。

4

4 回答 4

2

问题是它.hide()正在为所有匹配的元素运行，然后即使匹配的元素不可见也运行回调。通过使用该.filter()方法，您可以确保 `.hide()' 方法以及回调只被触发一次。这意味着代码会变得庞大，因为您需要在什么都没有显示的情况下捕捉到这种情况，但它确实工作得很好。

这方面的一个例子是

$('a.red').click(function () {
    var elements = $("#blue, #green, #yellow").filter(":visible");
    if (elements[0]) {
        elements.fadeOut(function () {
            $("#red").fadeIn();
        });
    } else {
        $("#red").fadeIn();
    }
});

你可以在这个JSFiddle中看到这完全有效

于 2013-03-15T12:05:31.453 回答
1

问题似乎是对于已经不可见的元素，“隐藏”动画需要零时间。依次为序列中的每个元素触发完整回调，而不仅仅是在动画结束时触发一次。因此，任何不可见元素的动画都会立即完成并立即触发完成回调。为了解决这个问题，我调整了元素的 jQuery 选择器，以便只有实际可见的元素才能获得动画效果：

   $('a.red').click(function () {
       toggleVisibility("#blue, #green, #yellow", "#red");
   });

   function toggleVisibility(elementsToHide, elementsToShow) {
       var elements = $(elementsToHide).filter(':visible');
       if (elements.length) {
           // Hide visible elements first if there are any
           elements.fadeOut(function () {
               $(elementsToShow).fadeIn();
           });
       } else {
           // ...otherwise just show specified element directly
           $(elementsToShow).fadeIn();
       }
   }

所以现在回调只触发一次。

干杯，亚历克斯

编辑：如果所有元素最初都是不可见的，则不起作用；我相应地更改了代码。此外，新的片段更干燥。

于 2013-03-15T11:39:07.517 回答
0

一种可能的解决方案是使用将新 div 的出现延迟一小段时间，让其他动画首先完成。

.delay()

http://api.jquery.com/delay/

例如：

$('a.red').click(function () {
   $("#blue, #green, #yellow").hide('fade', function () {

       $("#red").delay(500).show('fade');
   });
});

举了一个简单的例子，大部分时间都很好用，但每隔一段时间它们就会同时显示一段时间。只需要调整:) http://jsfiddle.net/a7mCL/15/

于 2013-03-15T11:07:20.743 回答
0

使用.stop()它将停止在 DOM 上制作动画。

描述：停止匹配元素上当前正在运行的动画。

STOP

于 2013-03-15T10:59:19.957 回答