依次切换和淡化效果答案

【问题标题】：Toggle and Fade Effects Sequentially依次切换和淡化效果
【发布时间】：2011-06-28 20:04:39
【问题描述】：

我希望在 jQuery 中在向下滑动然后淡入和淡出然后向上滑动效果之间切换。可以用toggle 做这样的事情吗？我目前有：

<a href="#" id="toggle">more</a>

<div id="about">
  <p id="info">...</p>
</div>

<script>
  $('#toggle').click(function() {
    $('#about').toggle('fast', function() { $('#info').fadeIn(); });
  });
</script>

但它仅适用于初始点击。是否可以添加两个在单击之间切换的功能？是否存在在不跟踪状态变量的情况下执行上述操作的方法？谢谢！

【问题讨论】：

标签： jquery

【解决方案1】：

已解决：

$("#info").toggle(
  function () { $("#about").toggle('fast', function () { $("#info").fadeToggle('fast'); }); },
  function () { $("#info").fadeToggle('fast', function () { $("#about").toggle('fast'); }); }
);

【讨论】：

【解决方案2】：

你可以考虑FadeToggle

http://api.jquery.com/fadeToggle/

<script>   
$('#toggle').click(function() {     
    $('#about').toggle('fast', function() { 
      $('#info').fadeToggle(); 
    });   
}); 
</script>

【讨论】：

谢谢，但我正在查看不同的顺序（向下滑动然后淡入；淡出然后向上滑动）。我设法弄明白了，但感谢答案！
nw，我无法根据原件猜出顺序；）但很高兴您不必检查隐藏的东西。

【解决方案3】：

您可以使用 is() 和 :visible 来检查状态。试试这个：

<script>
  $('#toggle').click(function() {
        var about = $("#about")
        if(about.is(':visible')){
            $('#about').toggle('fast', function() { $('#info').fadeOut(); });
        }
        else{
            $('#about').toggle('fast', function() { $('#info').fadeIn(); });
        }

  });
</script>

【讨论】：

谢谢，但我正在查看不同的顺序（向下滑动然后淡入；淡出然后向上滑动）。我设法弄明白了，但感谢答案！