показать скрытый контент с jquery

Question

Я новичок в программировании. Я хочу создать show/hide div с эффектом jquery.

у меня есть два элемента, <div>

1. <div class="div1">
2. <div class="div2"> ----> я установлен hide в моем CSS (дисплей: нет)

это мой HTML-код:

<a href="#" class="show_div_2">Div 2</a> 

<div id="div1"> THIS IS DIV 1...</div> 

<div id="div2"> THIS IS DIV 2...</div> 

и это мой javascript код:

$(document).ready(function(){ 
    $(".div1").show(); 

    $('.show_div_2').click(function(){ 
     $(".div1").slideToggle('fast'); 
     $(".div2").slideToggle('slow'); 
    }); 

}); 

Моя проблема в том, что ... Как я могу принести time interval между div1 и div2 ??? Другими словами, я хочу показать div2 после div1 спрятать.

Помогите мне пожалуйста .... ТНХ

Answer 1

Вы должны использовать функцию анимации успех обратного вызова:

$(document).ready(function(){ 

    $(".div1").show(); 

    $('.show_div_2').click(function(){ 
    $(".div1").slideToggle('fast', function(){ 
     $(".div2").slideToggle('slow'); 
    }); 
    }); 

}); 

Answer 2

$(".div1").slideToggle('fast',function(){ 
    $(".div2").slideToggle('slow'); 
}); 

JQuery эффекты обратного вызова, что является выполняется, когда эффект делается. Если вы запускаете эффект на div2, когда эффект на div1 закончен, все готово.

Answer 3

попробовать это:

$('.show_div_2').click(function(){ 
$(".div1").slideToggle('fast', function(){ 
    $(".div2").slideToggle('slow'); 
}); 
}); 

Answer 4

Вы можете добавить обратного вызова-функции к функции slideToogle(), как это:

$(".div1").slideToggle('fast', function() { 
    // this function is called when the div1 slideToogle function is done 
    $(".div2").slideToggle('slow'); 
}); 

Answer 5

Я хотел бы предложить следующее:

$('.show_div_2').click(
    function(e){ 
     e.preventDefault(); // prevents default action of the link element 
     var div1 = $('#div1'), // reference to the jQuery object 
      div2 = $('#div2'); 
     div1.fadeOut(// fades out the div of id="div1" 
      function(){ 
       div2.fadeIn(); /* fades in the div id="div2" once the 
            previous fadeOut has completed */ 
      }); 
    }); 

JS Fiddle demo.

Кроме того, у вашего исходного кода были некоторые проблемы, например: $(".div1").show(); выбирает все элементы class="div1", ни один из которых не присутствует в вашем HTML; что у вас есть получил id="div1", что требует типа селектора $('#div1').

Ссылки:

• JQuery:
  • click().
  • fadeIn().
  • fadeOut().
• селекторы:
  • CSS Selectors.
  • jQuery Selectors.