Javascript 在模式中缓慢显示/隐藏侧边栏菜单和图像

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

<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>

函数wbsn_open（）{
document.getElementById（“mySidebar”）.style.display=“block”；
document.getElementById（“myOverlay”）.style.display=“block”；
}
函数wbsn_close（）{
document.getElementById（“mySidebar”）.style.display=“无”；
document.getElementById（“myOverlay”）.style.display=“无”；
}
//模态图像库
函数onClick（元素）{
document.getElementById（“img01”）.src=element.src；
document.getElementById（“modal01”）.style.display=“block”；
var captionText=document.getElementById（“caption”）；
captionText.innerHTML=element.alt；
}

以下是来自

您可以使用jqueryanimate来控制事件的速度-慢、快和自定义

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

基本上是指..在300纳秒后调用fadeIn，即显示块事件..&然后在完成所有操作后调用回调函数

$（文档）.ready（函数（）{
$（“.btn1”）。单击（函数（）{
美元（“p”）。淡出（1300）
});
$（“.btn2”）。单击（函数（）{
美元,法代因(1300美元);；
});
});

这是一个段落
淡出
淡入

非常简单，您可以这样做：

当边栏出现时添加一个类，例如中的

边栏，该类使用css添加动画效果

在类中删除

侧栏，然后在类中添加
侧栏

你可以为图像库做类似的事情

答复:

函数wbsn_open（）{
var sidebar=document.getElementById（“mySidebar”）；
document.getElementById（“myOverlay”）.style.display=“block”；
sidebar.style.display=“block”；
删除（“侧边栏输出”）；
sidebar.classList.add（“sidebar in”）；//这里发生了奇迹
}
函数wbsn_close（）{
var sidebar=document.getElementById（“mySidebar”）；
document.getElementById（“myOverlay”）.style.display=“无”；
sidebar.style.display=“无”；
侧栏。类列表。删除（“侧栏中”）；
sidebar.classList.add（“sidebar out”）；//这里发生了奇迹
}
//模态图像库
函数onClick（元素）{
document.getElementById（“img01”）.src=element.src；
var gallery=document.getElementById（“modal01”）；
gallery.style.display=“block”；
gallery.classList.add（“gallery in”）；//这里发生了奇迹
var captionText=document.getElementById（“caption”）；
captionText.innerHTML=element.alt；
}

你可以看看css动画

我强烈建议，使用图书馆，就像它让你的生活更轻松一样

---

创建一个可以轻松解决问题的窗口。

使用

CSS转换

你能显示WBSNU打开和WBSNU关闭的位置吗？？？@coooool。。。但是我需要修改我的脚本。。很抱歉希望你能理解……试试美元（“#mySidebar”）。法登（2000）；检查我更新的答案…你会得到一些想法，进来又很快出来，而不是淡出：（你是否淡出了所有的.display=“none”和.display=“block”事件…让我再写一次我的答案，让我知道结果函数wbsn\u close（）{$（“#mySidebar”）.fadeout（2000）$（“#myOverlay”）.fadeout（2000）}

<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;
    }