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()基本上是一个显示/隐藏切换，但你有fadeIn。我最接近的猜测是你想要一个淡入淡出切换，在这种情况下你可以使用animate()来做到这一点：

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

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

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

Answer 4

在jquery.js底部编写自定义函数要好得多：

jQuery.fn.fadeToggle = function(speed, easing, callback) {
   return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

然后你可以这样称呼它：

$('#hiddenElement').fadeToggle('fast');

Answer 5

看起来两年前有人写了plugin for this。

Answer 6

非常简单

$("a#biz-blue").live('click',function(){
   $('#business-blue').slideToggle(200);
});

jquery切换和淡入一个功能？

6 个答案: