jQuery fade and toggle

Question

У меня есть простая веб-страница с основным h1 сверху и двумя панелями внизу. панель 1 видна и панель 2 есть класс .hide.
То, что я хочу сделать, это:
, когда я нажимаю body или h1 - панель 1 должна исчезать и панель 2 должны исчезать одновременно.
А для второй панели, когда я только нажать на h1 - панели 2 должны исчезать и панель 1 должны исчезнуть снова.

Теперь код: когда я нажимаю тело приносит панель 2 успешно, и в панели 2, когда я нажимаю h1 это возвращает меня к панели 1 успешно. Но когда я нажимаю на h1 на панели 1, она исчезает, отображаются панель на секунду, а затем исчезает снова и не отображает второй панели. Что мне делать?

$(function() { 
    $('body,h1').on('click',function(){ 
     $('div.panel-1').fadeOut(1000); 
     $('div.panel-2').fadeIn(1000).removeClass('hide'); 
     return false; 
     }); 
}); 


$(function() { 
    $('h1').on('click',function(){ 
     $('div.panel-2').fadeOut(1000); 
     $('div.panel-1').fadeIn(1000); 
    }); 
}); 

Answer 1

Вы, кажется, присоединяете двух слушателей событий к H1. Вероятно, вы должны подключить только один прослушиватель, который переключает видимость панелей (обнаруживает, что видно и переключается соответственно). В вашем коде слушатели называются последовательно. Кроме того, вы удаляете его «спрятать» класс, но вы не добавляете его нигде.

Answer 2

$(function() { 
    $('body').on('click',function (e){ 
     if ($('div.panel-1').is(':visible') && e.target.tagName != 'h1'){ 
      $('div.panel-1').fadeOut(1000, function() { 
       $('div.panel-2').fadeIn(1000).removeClass('hide'); 
       $(this).addClass('hide'); 
      }); 
     } 
     return false; 
    }); 

    $('h1').on('click',function(){ 
     if ($('div.panel-1').is(':visible')){ 
      $('div.panel-1').fadeOut(1000, function() { 
       $('div.panel-2').fadeIn(1000).removeClass('hide'); 
       $(this).addClass('hide'); 
      }); 
     }else{ 
      $('div.panel-2').fadeOut(1000, function() { 
       $('div.panel-1').fadeIn(1000).removeClass('hide');; 
       $(this).addClass('hide'); 
      }); 
     } 
     return false; 
    }); 
}); 

Просто идея для чего-то более простого, но эти вещи имеют тенденцию к растрепаться на многих кликов или неожиданное поведение:

$(function() { 
    $('body, h1').on('click',function(){ 
     $('div.panel-1, div.panel-2').toggleClass('hide').fadeToggle(1000); 
     return false; 
    }); 
}); 

Answer 3

demo jsBin

вы должны использовать event.stopPropagation() для события click
и для простоты используйте один класс:

$(function() { 
    $('body, h1').on('click',function(e){ 
     e.stopPropagation(); 
     $('.panel').fadeToggle(); 
    }); 
}); 

Answer 4

Итак, вот окончательная версия, она работает. Позволяет иметь два div в html с идентификатором с именем panel-1 и панель-2. Добавить класс .hide (display: none;) в панель-2. Если кто-то хочет: при щелчке тела или h1 - панель 1 должна исчезнуть, а панель 2 должна исчезнуть одновременно. И для второй панели при нажатии только на h1 - панель 2 должна исчезнуть, а панель 1 снова исчезнет.

$ (функция() {

$('h1').on('click',function(){ 
    if ($('div.panel-2').hasClass('hide')) { 
    $('div.panel-1').fadeOut(400).addClass('hide',function() { 
    $('div.panel-2').removeClass('hide').fadeIn(400); 
    return false; 
    }); 
    } 

    else if ($('div.panel-1').hasClass('hide')) { 
    $('div.panel-2').addClass('hide').fadeOut(400,function() { 
    $('div.panel-1').fadeIn(400).removeClass('hide'); 
    }); 
    return false; 
    } 

    }); 

$('body').on('click',function(){ 
    $('div.panel-1').addClass('hide').fadeOut(400,function() { 
     $('div.panel-2').fadeIn(400).removeClass('hide'); 
     return false; 
    }); 
    }); 

});