Создание div медленно сползает вниз, не работая с jquery

Question

В основном здесь я пытаюсь сделать div медленно скользить вниз, щелкнув ссылку. По умолчанию значение div (см. Ниже) скрыто, если для свойства отображения нет значения. После щелчка div становится видимым (display-> block) и медленно сдвигается вниз. Со следующим кодом js, div просто появляется, без скольжения. Вы можете считать это тривиальным, но ваш отзыв будет очень полезен для меня. Спасибо.

<div class="js-app-container" id="subscription_popup" style="padding-top: 70px; display: none;"> 
// contents inside the divs 
</div> 

<li class="menu-16246 last"> 
    <a href="#" class="subscribe-link open_popup" onclick="displaySubscription();">Subscribe</a> 
</li> 


<script> 
    function displaySubscription() { 
     // $('.js-app-container').css('display', 'block').fadeIn("slow", function() {}); 
     var node = document.getElementById('subscription_popup'); 
     if (node.style.display == 'block') { 
      // node.style.display = 'none'; 
      $('.js-app-container').css('display', 'none').fadeOut("slow", function() {}); 
     } else 
     // node.style.display = 'block' 
      $('.js-app-container').css('display', 'block').slideDown("slow", function() {}); 

    } 
</script> 

Answer 1

Перед анимацией вам не нужно устанавливать css display. Если вы не ищете разные анимации для hide и show, вы можете использовать slideToggle или fadeToggle.

function displaySubscription() { 
 
    var node = $('#subscription_popup'); 
 
    if (node.is(':visible')) 
 
    $('.js-app-container').fadeOut("slow", function() {}); 
 
    else 
 
    $('.js-app-container').slideDown("slow", function() {}); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="js-app-container" id="subscription_popup" style="padding-top: 70px; display: none;"> 
 
    // contents inside the divs 
 
</div> 
 

 
<li class="menu-16246 last"> 
 
    <a href="#" class="subscribe-link open_popup" onclick="displaySubscription();">Subscribe</a> 
 
</li>

Answer 2

Вы устанавливаете свойство отображения CSS до анимации есть шанс бежать. Попробуйте это:

<script type="text/javascript"> 

    function displaySubscription() { 
     // $('.js-app-container').css('display', 'block').fadeIn("slow", function() {}); 
     var node = $('#subscription_popup'); 
     if (node.is(':visible')) { 
      // node.style.display = 'none'; 
      $('.js-app-container').fadeOut("slow", function() {}); 
     } else 
     // node.style.display = 'block' 
      $('.js-app-container').slideDown("slow", function() {}); 

    } 

</script> 

Answer 3

Просто удалить все css('display','block') и css('display','none') из всех функций, вам не нужно их