基本上在这里,我正在尝试使div在单击链接时缓慢向下滑动。默认情况下,通过将display属性设置为none可以隐藏div(请参见下文)。单击后,div变为可见(显示->块)并缓慢向下滑动。使用以下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>

最佳答案

您无需在动画之前设置css display。如果不为hideshow寻找不同的动画,则可以使用slideTogglefadeToggle



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>

10-05 20:19
查看更多