Javascript 使div缓慢向下滑动而不使用jquery

基本上在这里，我试图让一个div在点击一个链接时慢慢地向下滑动。默认情况下，通过将“显示”属性设置为“无”，将隐藏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>

//div中的内容


函数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（）{}）；
}否则
//node.style.display='block'
$（'.js app container'）.css（'display'，'block'）.slideDown（“slow”，function（）{}）；
}

您不需要在动画之前设置css

显示。如果您没有为
隐藏
和
显示
寻找不同的动画，可以使用
滑动切换
或
淡入切换


函数displaySubscription（）{
变量节点=$（“#订阅_弹出窗口”）；
if（node.is（':visible'））
$（'.js app container'）.fadeOut（“slow”，function（）{}）；
其他的
$（'.js app container'）.slideDown（“slow”，function（）{}）；
}

//div中的内容

您不需要在动画之前设置css
显示。如果您没有为
隐藏
和
显示
寻找不同的动画，可以使用
滑动切换
或
淡入切换


函数displaySubscription（）{
变量节点=$（“#订阅_弹出窗口”）；
if（node.is（':visible'））
$（'.js app container'）.fadeOut（“slow”，function（）{}）；
其他的
$（'.js app container'）.slideDown（“slow”，function（）{}）；
}

//div中的内容

在动画有机会运行之前，您正在设置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>


函数displaySubscription（）{
//$（'.js-app-container'）.css（'display'，'block'）.fadeIn（“slow”，function（）{}）；
变量节点=$（“#订阅_弹出窗口”）；
if（node.is（':visible'））{
//node.style.display='none'；
$（'.js app container'）.fadeOut（“slow”，function（）{}）；
}否则
//node.style.display='block'
$（'.js app container'）.slideDown（“slow”，function（）{}）；
}
在动画有机会运行之前，您正在设置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>


函数displaySubscription（）{
//$（'.js-app-container'）.css（'display'，'block'）.fadeIn（“slow”，function（）{}）；
变量节点=$（“#订阅_弹出窗口”）；
if（node.is（':visible'））{
//node.style.display='none'；
$（'.js app container'）.fadeOut（“slow”，function（）{}）；
}否则
//node.style.display='block'
$（'.js app container'）.slideDown（“slow”，function（）{}）；
}
只需从所有函数中删除所有
css（'display'，'block'）
和
css（'display'，'none'）
，您不需要它们，只需从所有函数中删除所有
css（'display'，'block'）
和
css（'display'，'none'）
，你不需要它们
你能设置提琴或plunkr吗？可能你可以创建从不透明度0到不透明度1的动画，而向下滑动会有帮助。Anay，display:block/none不适用于动画。你能设置提琴或plunkr吗？可能你可以创建从不透明度0到不透明度1的动画，而向下滑动会有帮助。Anay，显示：块/无不适用于动画。