Question

基本上在这里我试图让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>

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')，您就不需要它们

使div缓慢滑落而不使用jquery

3 个答案: