divをゆっくりスライドさせてjqueryで作業しない

Question

ここでは、リンクをクリックするとdivをゆっくりとスライドさせようとしています。デフォルトでは、displayプロパティをnoneに設定することによって、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のdisplayプロパティを設定しています。これを試してみてください：

<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')を削除するには、