Question

我正在努力使用这个javascript，因为我只是一名设计师而且想要一些帮助

当我从另一个页面点击一个按钮时，我有这个代码使它成为slideIn但是如何在幻灯片放入时也将它变为幻灯片？

如果您想看到它正常工作，这是该网站。如果您点击“投资组合”，您将看到延迟的滑动效应的 www.jacintodematos.co.uk

<script>
     function slideIn(el){
       var elem = document.getElementById(el);
       elem.style.transition = "left 0.5s ease-in 0.8s";
       elem.style.left = "0px";
     }
</script>

<a href="#item3" class="panel" onclick="slideIn('info_text');">PORTFOLIO</a>

Answer 1

您将left的{{1}}更改为transition，因此左侧它也适用于all。

我假设元素有一个opacity所以它不在可见窗口中，left为0，所以我们可以淡入。然后我们只需要将元素不透明度改为1.

最后不确定延迟是什么意思，但是如果你希望在特定延迟后发生整个fadeIn，请将其放在opacity内。

setTimeout

jsfiddle DEMO (updated)

编辑：

要控制时间，请在转换中使用time参数：

 function slideIn(el) {
     setTimeout(function () {
         var elem = document.getElementById(el);
         elem.style.transition = "left 2s ease-in-out, opacity 4s linear";
         elem.style.left = "0px";
         elem.style.opacity = 1;
     }, 1000);
 }

transition: left 2s easi-in-out;表示2秒，如果它太慢则使其为1.5秒或更低，如果它快速使其为2.5秒或3秒或任何东西。

如果您想为不同的样式设置不同的转换，请用逗号分隔：

2s

elem.style.transition = "left 2s ease-in-out, opacity 4s linear";让开始和结束更顺畅。

我如何能够延迟淡入和滑动onclick中的div

1 个答案: