Einen div langsam nach unten rutschen nicht mit jquery arbeiten

Question

grundsätzlich hier Ich versuche ein div langsam nach unten rutschen beim Klicken auf einen Link. Standardmäßig wird das div (siehe unten) ausgeblendet, indem die display-Eigenschaft auf none gesetzt wird. Nach dem Klick wird das div sichtbar (display-> block) und gleitet langsam nach unten. Mit dem folgenden js-Code erscheint das div einfach, ohne jegliche Slideshow-Bewegung. Sie können dies als trivial betrachten, aber Ihr Feedback wird mir sehr hilfreich sein. Vielen Dank.

<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

Sie müssen nicht css display vor der Animation festlegen. Wenn Sie nicht nach verschiedenen Animationen für die hide und show suchen, können Sie slideToggle oder fadeToggle verwenden.

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

Sie die CSS Eigenschaft display vor den Animationen Einstellung eine Chance haben, zu laufen. Versuchen Sie folgendes:

<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

Entfernen Sie einfach alle css('display','block') und css('display','none') von allen Funktionen, brauchen Sie nicht zu ihnen