相关疑难解决方法(0)

是否可以在使用jQuery加载表单后5秒自动隐藏网页中的元素？

基本上,我有

<div id="successMessage">Project saved successfully!</div>

我想在5秒后消失.我已经看过jQuery UI和隐藏效果,但是我有点麻烦让它以我想要的方式工作.

<script type="text/javascript">
        $(function() {
            function runEffect() {

                var selectedEffect = 'blind';

                var options = {};

                $("#successMessage").hide(selectedEffect, options, 500);
            };

            $("#successMessage").click(function() {
                runEffect();
                return false;
            });
        });
    </script>

我想删除click函数并添加一个在5秒后调用runEffect()的超时方法.

很多格拉西亚斯!

我正试图div用纯JavaScript制作fadeOut效果.

这就是我目前使用的:

//Imagine I want to fadeOut an element with id = "target"
function fadeOutEffect()
{
 var fadeTarget = document.getElementById("target");
 var fadeEffect = setInterval(function() {
  if (fadeTarget.style.opacity < 0.1)
  {
   clearInterval(fadeEffect);
  }
  else
  {
   fadeTarget.style.opacity -= 0.1;
  }
 }, 200);
}

div应该顺利淡出,但它会立即消失.

怎么了？我该如何解决？

jsbin

我发现这个问题CSS自动隐藏元素5秒后

我需要知道如何做到这一点.基本上:

-Page加载元素隐藏

- 等了5秒

-Show元素

我对CSS不是很好,所以任何帮助都会很好!

#thingtohide {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}