Question

我希望在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>

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

Answer 1

您可以使用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>

Answer 2

您可以考虑使用FadeToggle

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

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

Answer 3

解决：

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

按顺序切换和淡化效果

3 个答案: