JQuery toggle fade and animate

Question

Я использую кнопку переключения, чтобы показать/скрыть контент на моей странице. И моя цель - переключить содержимое из #circleBtn, Но я хочу, чтобы #logo «переключался» и исчезал, а div #content переключался влево и исчезал при переключении. Сейчас все просто исчезает.

<script type="text/javascript"> 

    jQuery(document).ready(function($) { 
     $("#circleBtn").click(function() { 
      $('#logo,#access,#content').fadeToggle('easeInElastic'); 
     }); 

     $("#logo").click(function() { 
      $("#content").show("slide", { direction: "left" }, 1000); 
     }); 
    }); 

</script> 

Answer 1

насколько я знаю, нет встроенных методов JQuery, который скользит элемент вверх или в сторону, и в то же время исчезает его, но с помощью метода animate() вы можете анимировать все, что вы хотите, и чтобы сделать его переключения, вы можете использовать флаг

jQuery(function($) { 
    $("#circleBtn").on('click', function() { 
     var flag = $(this).data('flag'); 

     $('#logo, #access, #content').animate({ 
      top  : (flag ? -100 : 0), 
      opacity : (flag ? 0 : 1) 
     }, 1000, 'easeInElastic'); 

     $(this).data('flag', !flag); 
    }); 
}); 

FIDDLE

Answer 2

Есть ли причина, по которой вы бы не захотели поместить весь код, который переключает и стирает ваши HTML-элементы в функции circleBtn click listener?

Как это:

$("#circleBtn").click(function() { 
    $("#content").show("slide", { direction: "left" }, 1000); 
    $("#logo").show("slide", {direction: "up" },1000); 
    $('#logo,#access,#content').fadeToggle('easeInElastic'); 
}); 

Answer 3

вы можете попробовать использовать JQuery, анимацию, а не так как в этом случае вы хотите пользовательскую анимацию.

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

$('#logo').animate({ 
    opacity:0, 
    height: 0 
}); 

$('#content').animate({ 
    opacity:0, 
    width: 0 
}); 

Вы можете сделать наоборот, чтобы показать им