Question

如何将转换添加到document.getElementById("myDIV").style.display = "none";我正在处理注册表单，如果一个输入具有某个值，则另一个div被隐藏但看起来很粗糙，有没有办法添加转换进入以下JS？

 <script type="text/javascript">
        function myFunction() {
            document.getElementById("myDIV").style.display = "none";
        }
        function hideshow(which){
            if (!document.getElementById)
                return
                if (which.style.display=="block")
                which.style.display="block"
                else
                    which.style.display="block"
                    }


        function myFunction1() {
            document.getElementById("myDIV2").style.display = "none";
        }
    </script>

Answer 1

使用

等参数创建函数

function hideDiv(div_id) {
        document.getElementById(div_id).style.display = "none";
}

function showDiv(div_id) {
        document.getElementById(div_id).style.display = "block";
}

Answer 2

进行转换的方法是在之后设置style.display= "none" ，以执行从视图中删除元素的某种动画。

你可以：

淡出（将opacity设为0 - 在CSS中使用transition淡化）

向上/向下/向左/向右滑动（动画库或花哨的CSS）

做一些其他更高级的动画（如弹跳，收缩等）

然后，设置style.display = "none"

最简单的方法（在我看来）是一个动画库。我个人推荐VelocityJS，因为你不需要jQuery来运行它。

Answer 3

我认为无论如何都不能用简单的js做到这一点，不过我用JQuery很容易做到了

 <script type="text/javascript">

    $(document).ready(function(){

$("#myDIV").show();

$(document).on('click', '.married' , function() {

    if (this.value == "never_married"){            
        $("#myDIV").hide('slow');           
    } else {
        $("#myDIV").show('slow');           
    }       
})

}）;

Answer 4

原因是display未设置动画，将其从block设置为none，但不会为您提供您正在寻找的结果。< / p>

执行此操作的一个好方法是使用CSS和JavaScript进行转换。

将Transition添加到myDIV样式中，例如：

#myDIV {
    opacity: 1;
    transition: 1s ease;
}

#myDIV.hidden {
    opacity: 0;
    transition: 1s ease;
}

然后使用JavaScript将hidden课程应用到#myDiv，您就可以获得动画了。
动画完成后，设置el.style.display = 'none';使其完全从视图中消失。

如何将转换添加到Javascript document.getElementById（“myDIV”）。style.display =“none”;

4 个答案: