Question

我使用加载动画构建了一个简单的show / hide脚本。但我希望加载动画至少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秒。

谢谢！

Answer 1

.show和.hide不会设置动画，除非您在评论中传递了基督徒建议的可选参数。

要使用淡化效果，您可以使用.fadeIn和.fadeOut。它接受speed的可选参数（并接受slow，fast等常量。

Answer 2

你可以使用

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

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

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

Answer 3

使用：

.show('slow');

.hide('slow');

OR

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

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

除了“slow”之外，您还可以提供数值，该值将被视为毫秒。

例如：.show(1000)等等。

干杯

Answer 4

您可以使用

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

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

Answer 5

我认为现代浏览器的最佳方法是使用css transitions，然后只显式更改元素的不透明度。因此，如果做$('#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的动画方法是个好主意。

Answer 6

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

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的图像。这应该覆盖已更改的内容。

但是大家都感谢你的快速回复！

Jquery最小的执行时间

6 个答案: