0

我已经构建了一个带有加载动画的简单显示/隐藏脚本。但我希望加载动画至少为 0.5 秒。

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#loading').hide();
        $('#notesunlimitedcontent').hide();
        $('#notescontent').show();

        $('a#nsetcontent').click(function () {
            $('#loading').show();
            $('#notesunlimitedcontent').hide();
            $('#notescontent').show();
            $('#loading').hide();
        });


        $('a#nusetcontent').click(function () {
            $('#loading').show();
            $('#notescontent').hide();
            $('#notesunlimitedcontent').show();
            $('#loading').hide();
        });

    });
</script>


<a id="nsetcontent" href="#">show</a>
<a id="nusetcontent" href="#">show</a>


<div id="loading">
    <img src="loading.gif"/>
</div>
<div id="notescontent">
</div>
<div id="notesunlimitedcontent">
</div>

所以它看起来像这样，我不知道我是否正确编码，因为我是 jquery 的新手。但是我已经对其进行了测试，它确实显示和隐藏了两个 div，但我没有看到加载 div 会发生这种情况，也许是因为它运行得很快？

我希望有人能解释我如何让加载时间至少为 0.5 秒。

谢谢！

4

6 回答 6

1

.show.hide除非您按照 christian 在评论中的建议传递可选参数，否则不会动画。

要使用淡入淡出效果，您可以使用.fadeIn和.fadeOut。它接受一个可选参数speed（并接受一些常量，如slow, fast）。

于 2013-08-25T14:02:43.667 回答
1

您可以使用

.hide(500);和.show(500);

.slideUp(500);和 。slideDown(500);

.fadeOut(500);和.fadeIn(500);

于 2013-08-25T14:06:44.023 回答
0

采用 ：

.show('slow');

.hide('slow');

或者

.fadeIn('slow');//instead of show()

.fadeOut('slow');// instead of hide

代替“ slow”，您也可以给出数值，以毫秒为单位。

例如：.show(1000)等等。

干杯

于 2013-08-25T14:03:47.390 回答
0

您可以使用

.show(5000);
.hide("slow");

也许这会让你看到发生了什么。

于 2013-08-25T14:06:12.680 回答
0

我认为现代浏览器的最佳方法是使用css 转换，然后显式更改元素的不透明度。所以相反，如果做一些$('#loading').show()你可以做的事情$('#loading').css('opacity', 1)，并且如果你想隐藏元素，你会做同样的事情，除了将第二个 arg 的 0 传递给 css()。

然后在您的 css 文件中，您可能想要创建一个“.fadeable”类，您可以使用不同的元素重复使用，如下所示：

.fadeable {
    -webkit-transition: opacity 500ms linear
    -moz-transition: opacity 500ms linear
    -o-transition: opacity 500ms linear
    transition: opacity 500ms linear
}

然后只需将这些类附加到您想要淡入淡出的元素，例如#loading 和#notescontent。使用过渡而不是 fadeIn()/fadeOut() 的优势在于，您可以通过使用浏览器的原生动画引擎获得巨大的性能改进，并且它可以释放 js 计时器来处理它必须执行的其他任务，而不仅仅是必须执行执行动画事件。但是，如果您需要支持较旧的浏览器和 IE9，则回退到jQuery 的动画方法是个好主意。

于 2013-08-25T14:24:54.900 回答
0

我终于让它与超时一起工作：

setTimeout(function() {
      // Do something after 0.5 seconds
}, 500);

所以 jquery 代码现在看起来像这样：

<script type="text/javascript">
    $(document).ready(function () {
        $('#loading').hide();
        $('#notesunlimitedcontent').hide();
        $('#notescontent').show();

        $('a#nsetcontent').click(function () {
            $('#loading').show();
            setTimeout(function() {
                $('#notesunlimitedcontent').hide();
            }, 500);
            $('#notescontent').show();
            setTimeout(function() {
                $('#loading').hide();
            }, 500);
        });


        $('a#nusetcontent').click(function () {
            $('#loading').show();
            setTimeout(function() {
                $('#notescontent').
            }, 500);
            $('#notesunlimitedcontent').show();
            setTimeout(function() {
                $('#loading').hide();
            }, 500);
        });

    });
</script>

为了解释我想要的动画，我有一个具有透明背景的 div，并包含一个显示加载 .gif 的图像。那应该覆盖已更改的内容。

但是每个人都感谢您的快速回复！

于 2013-08-26T10:00:30.887 回答