jquery 加载动画效果怎么做
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 加载动画效果怎么做相关的知识，希望对你有一定的参考价值。
有个很简单的方法
首先载入jquery
<script src="
之后把body加上style
<body style="display: none;">
然后添加script事件
<script>
$(document).ready(function()
$(\'body\').show(10000); // 1000等于1秒
);
</script> 参考技术A
css3来实现动画效果更高，配上js控制显示隐藏，就模拟出了一个，给你一个示例，js就没有了啊
html：
<div class="loader"><div class="myloading"></div>
</div>
css：
.loaderwidth: 100%;height: 100%;position: fixed;z-index: 100;animation: bgc 4s 1s infinite;-webkit-animation: bgc 4s 1s infinite;-moz-animation: bgc 4s 1s infinite;-o-animation: bgc 4s 1s infinite;-ms-animation: bgc 4s 1s infinite;
animation-fill-mode: both;
@keyframes bgc
0% background-color: blueviolet;
25% background-color: #B1A25E;
50%background-color: #25AEF5;
75%background-color: mediumvioletred;
100% background-color: blueviolet;
@-webkit-keyframes bgc
0% background-color: blueviolet;
25% background-color: #B1A25E;
50%background-color: #25AEF5;
75%background-color: mediumvioletred;
100% background-color: blueviolet;
@-moz-keyframes bgc
0% background-color: blueviolet;
25% background-color: #B1A25E;
50%background-color: #25AEF5;
75%background-color: mediumvioletred;
100% background-color: blueviolet;
@-ms-keyframes bgc
0% background-color: blueviolet;
25% background-color: #B1A25E;
50%background-color: #25AEF5;
75%background-color: mediumvioletred;
100% background-color: blueviolet;
@-o-keyframes bgc
0% background-color: blueviolet;
25% background-color: #B1A25E;
50%background-color: #25AEF5;
75%background-color: mediumvioletred;
100% background-color: blueviolet;
.myloading width: 50px;height: 50px;background-color: #FFF;margin: auto;position: absolute;left: 0;top: 0;right: 0;bottom: 0;
animation: load 2s infinite;-webkit-animation: load 2s infinite;-moz-animation: load 2s infinite;-o-animation: load 2s infinite;-ms-animation: load 2s infinite;
animation-fill-mode: both;
@keyframes load
0%transform: perspective(100px) rotateX(0deg) rotateY(0);
25%transform: perspective(100px) rotateX(180deg) rotateY(0);
50%transform: perspective(100px) rotateX(180deg) rotateY(180deg);
75%transform: perspective(100px) rotateX(0) rotateY(180deg);
100%transform: perspective(100px) rotateX(0) rotateY(0);
@-webkit-keyframes load
0%transform: perspective(100px) rotateX(0deg) rotateY(0);
25%transform: perspective(100px) rotateX(180deg) rotateY(0);
50%transform: perspective(100px) rotateX(180deg) rotateY(180deg);
75%transform: perspective(100px) rotateX(0) rotateY(180deg);
100%transform: perspective(100px) rotateX(0) rotateY(0);
@-moz-keyframes load
0%transform: perspective(100px) rotateX(0deg) rotateY(0);
25%transform: perspective(100px) rotateX(180deg) rotateY(0);
50%transform: perspective(100px) rotateX(180deg) rotateY(180deg);
75%transform: perspective(100px) rotateX(0) rotateY(180deg);
100%transform: perspective(100px) rotateX(0) rotateY(0);
@-o-keyframes load
0%transform: perspective(100px) rotateX(0deg) rotateY(0);
25%transform: perspective(100px) rotateX(180deg) rotateY(0);
50%transform: perspective(100px) rotateX(180deg) rotateY(180deg);
75%transform: perspective(100px) rotateX(0) rotateY(180deg);
100%transform: perspective(100px) rotateX(0) rotateY(0);
@-ms-keyframes load
0%transform: perspective(100px) rotateX(0deg) rotateY(0);
25%transform: perspective(100px) rotateX(180deg) rotateY(0);
50%transform: perspective(100px) rotateX(180deg) rotateY(180deg);
75%transform: perspective(100px) rotateX(0) rotateY(180deg);
100%transform: perspective(100px) rotateX(0) rotateY(0);
jQuery解决动画累积问题
jQuery解决动画累积问题
在用jQuery做hover动画效果时发现当鼠标快速滑入滑出触发元素时，动画会出现累积。
在执行完一次之后多次执行，直到动画队列执行完毕。很影响动画效果，毕竟鼠标不小心划过都会触发动画。同样当你用click事件多次点击时动画也是会累积。为什么会出现动画累积呢？
因为动画的执行需要时间而事件的触发不需要时间间隔，所以会出现动画累积。之后，在此提供两种解决方法。
1.stop()
语法：$(selector).stop(stopAll,goToEnd)
两个参数的值为true或者false，默认值为false。
stopAll可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd 可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。
1.stop()，由于两个参数都是false。所以事件发生时，animater没有跳到当前动画（动画1）的最终效果，而直接进入动画2，然后动画3，4，5.直至完成整个动画。
2.stop(true)，由于第一个是true，第二个是false，所以animater立刻全部停止了。
3.stop(false,true)，由于第一个是false，第二个是true，所以事件发生时，animater身处的当前动画（动画1）停止并且animater直接跳到当前动画（动画1）的最终末尾效果位置，接着正常执行下面的动画（动画2，3，4，5），直至完成整个动画。
4.stop(true，true)，由于两个都是true，所以事件发生时，animater跳到当前动画（动画1）的最终末尾效果位置，然后，全部动画停止
stop()的解决思路是当动画累积时，每次动画先停止之前动画，而进行该次动画，即每次执行的是原动画队列中的最后一个动画。
测试代码：
HTML:
<body>
<div>
<div></div>
</div>
</body>
CSS:
.out
{
width: 200px;
height: 200px;
background-color: black;
margin-bottom: 2vh;
}
.front
{
position: relative;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background-color: red;
display: none;
}
jQuery:
$(document).ready(function(){
$(".out").hover(function()
{
$(this).find(".front").stop(true);
$(this).find(".front").fadeIn('slow');
},
function()
{
$(this).find(".front").stop(true);
$(this).find(".front").fadeOut('fast');
})
});
2.setTimeout
语法：setTimeout(code,millisec)
code必需。要调用的函数后要执行的JavaScript 代码串。
millisec必需。在执行代码前需等待的毫秒数。
setTimeout的解决思路是延迟动画执行时间。而利用setTimeout，我们增长了事件触发到动画执行的时间，如果在这段时间有另一个事件触发我们则清除这个待执行的动画去执行下个动画，以此来解决动画积累。
测试代码：
jQuery:
var timer=null;
$(document).ready(function(){
$(".out").hover(function()
{
var child = $(this).find(".front");
timer=setTimeout(function()
{
child.fadeIn('slow')
},500);
},
function()
{
if(timer)
clearTimeout(timer);
$(this).find(".front").fadeOut('fast');
});
});
在这要注意在执行setTimeout前用一个变量(child)来保存动画对象。因为在setTimeout中this指向的是window。有可能导致对象的丢失。
用setTimeout并不能完美解决动画累积，因为在执行动画时，如果我们再次触发事件还是会进行累积，这点在click事件中尤为明显。所以在click事件中推荐用stop()解决问题。
以上是关于jquery 加载动画效果怎么做的主要内容，如果未能解决你的问题，请参考以下文章