Question

我有一个脚本，显示/隐藏侧边栏菜单和模态图像，所有功能快速外观，但我需要它慢...我找不到决定...你能帮忙吗...

<script>
    function wbsn_open() {
    document.getElementById("mySidebar").style.display = "block";
    document.getElementById("myOverlay").style.display = "block";
}

function wbsn_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}

// Modal Image Gallery
 function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
  var captionText = document.getElementById("caption");
  captionText.innerHTML = element.alt;
}
</script>

Answer 1

以下是w3school

的简单教程

你可以使用jquery动画，让你可以控制事件的速度，速度快，速度快。自定义

INSERT INTO `Student Attendance` (`USN`, `Subject Code`, `Attendance`, `Absent Days`) VALUES ('1KS15BT001', '15BT44', '0', '0');

Error: 
#1241 - Operand should contain 1 column(s)

基本上意味着...在300纳秒之后调出淡入淡出即显示块事件。＆amp;完成所有操作后调用回调函数

 function wbsn_open() {
    $("#mySidebar").fadeIn(2000); 
    $("#myOverlay").fadeIn(2000); 
}

 
$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").fadeOut(1300)
    });
    $(".btn2").click(function(){
        $("p").fadeIn(1300);
    });
});

Answer 2

这很简单，你会这样做：

当侧边栏显示为例如sidebar-in并且该类使用css
删除sidebar-in类，然后添加sidebar-out类，此类将执行相反的动画

您可以为图片库做类似的事情

答案：

<script>
    function wbsn_open() {           
        var sidebar = document.getElementById("mySidebar");
        document.getElementById("myOverlay").style.display = "block";
        sidebar.style.display = "block";
        sidebar.classList.remove("sidebar-out");
        sidebar.classList.add("sidebar-in"); // Magic happens here
    }

    function wbsn_close() {
        var sidebar = document.getElementById("mySidebar");
        document.getElementById("myOverlay").style.display = "none";
        sidebar.style.display = "none";
        sidebar.classList.remove("sidebar-in"); 
        sidebar.classList.add("sidebar-out"); // Magic happens here
    }

    // Modal Image Gallery
    function onClick(element) {
        document.getElementById("img01").src = element.src;
        var gallery = document.getElementById("modal01"); 
        gallery.style.display = "block";
        gallery.classList.add("gallery-in"); // Magic happens here

        var captionText = document.getElementById("caption");
        captionText.innerHTML = element.alt;
    }

您可以查看css动画here

我强烈建议，使用类似jQuery的库，这会让您的生活更轻松。

创建一个jsfiddle，以便轻松解决您的问题。

缓慢显示/隐藏侧边栏菜单和模态中的图像

2 个答案:

答案：