Jquery переключается и исчезает в одной функции?

Мне было интересно, если 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>

Ответы

Ответ 1

Так как jQuery 1.4.4 для этой функции существует новая функция .fadeToggle()

JQuery fadeToggle

Ответ 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;
  });

Ответ 3

Ваш вопрос немного смущает меня, потому что .toggle() - это в основном переключатель show/hide, но у вас есть fadeIn. Самое близкое, что у меня есть, - это то, что вы хотите включить fade-toggle, и в этом случае вы можете сделать это, используя animate():

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

Другой вариант, который может вам понадобиться, - это слайд вверх и вниз, используя .slideToggle() следующим образом:

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

Ответ 4

Намного лучше написать пользовательскую функцию внизу jquery.js:

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

Затем вы можете вызвать его так:

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

Ответ 6

Очень просто

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