jquery切换和淡入一个功能？

Question

我想知道是否可以在一个函数中使用toggle()和fadeIn()...

我让这个工作,但它只在第二次点击后消失...而不是第一次点击切换.

$(document).ready(function() {

 $('#business-blue').hide();

  $('a#biz-blue').click(function() {
    $('#business-blue').toggle().fadeIn('slow');
    return false;
  });

// hides the slickbox on clicking the noted link 

  $('a#biz-blue-hide').click(function() { 
     $('#business-blue').hide('fast'); 
     return false; 
  }); 


});



  <a href="#" id="biz-blue">Learn More</a>
        <div id="business-blue" style="border:1px soild #00ff00; background:#c6c1b8; height:600px; width:600px; margin:0 auto; position:relative;">
            <p>stuff here</p>
        </div>

Answer 1

从jQuery 1.4.4开始,有一个新的函数被调用 .fadeToggle()

Jquery fadeToggle

Answer 2

您可以使用toggle()在一组函数之间切换.因此,如果你想要一个元素fadeIn和fadeOut每隔一次点击,就有一个切换控件2个函数:fadeIn和fadeOut.像这样:

$('a#biz-blue').toggle(function() {
    $('#business-blue').fadeIn('slow');
    return false;
  },
function() {
    $('#business-blue').fadeOut('slow');
    return false;
  });

Answer 3

你的问题让我有点困惑，因为.toggle()基本上是一个显示/隐藏切换，但你有淡入。我最接近的猜测是您想要一个淡入淡出切换，在这种情况下您可以使用以下命令来执行此操作animate()：

$('#business-blue').animate({opacity: 'toggle'}, 800); 

您可能需要的另一个选项是上下滑动，.slideToggle()如下所示：

$('#business-blue').slideToggle('slow');