使用相同的链接onclick淡入和淡出div [英] Fade div in and out using the same link onclick

问题描述

我可以通过单击淡入div，但是如何使用相同的单击来切换该div，即在单击时淡入div，然后在第二次单击时淡出div.

I can fade a div in with a click but how do I use the same click to toggle that div, i.e. fade the div in on click and then fade the div out on second click.

我希望单击一次导航栏以打开叠加层，然后再次单击以淡出叠加层.

I'd like navbar-toggle to be clicked once to open overlay and clicked again to fade out overlay.

<script>

 $(document).ready(function(e) {

  $('.navbar-toggle').click(function(e){    
    $('.overlay, .popup').fadeIn('slow');
  });

  $('.navbar-toggle').click(function(e){         
    $('.overlay, .popup').fadeIn('slow');
  });

});
</script>

推荐答案

您可以通过以下几种方法来实现:

You can do it a couple of ways:

解决方案1:

使用toggle()

$('.navbar-toggle').click(function(e){    
    $('.overlay, .popup').toggle('fast');
});

JSFiddle演示

JSFiddle Demo

解决方案2:

使用fadeToggle()

$('.navbar-toggle').click(function(e){    
    $('.overlay, .popup').fadeToggle(300);
});

JSFiddle演示

JSFiddle Demo

解决方案3:

有一个隐藏的类并检查它是否存在

Have a hidden class and check to see if it exists

这篇关于使用相同的链接onclick淡入和淡出div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！