我可以在同一时间调用此功能。
第一次调用:在setInterval
中运行并在没有动画的情况下跳转,
第二次通话:在$(document).ready
之后运行并正确执行。
fadeInFadeOut : function (oldContent, newContent, flag) {
hcGlobal.animateFlag = flag
switch (hcGlobal.animateFlag) {
case true:
$( oldContent ).stop().animate({
'top' : '30px',
'opacity' : '0'
}, 400, 'easeInOutBack', function() {
$( this ).html( newContent );
if (hcGlobal.animateFlag) {
$( this ).animate({
'top' : '0px',
'opacity' : '1'
}, 400, 'easeInOutBack');
hcGlobal.animateFlag = false
}
});
break;
case false:
$( oldContent ).html( newContent );
break;
}
}
为什么会这样?有一种方法可以在一个函数上同时处理多个调用吗?
感谢。
答案 0 :(得分:1)
我在另一个函数中使用了两个函数(例子)。你也可以看到,我使用了setInterval和ready()函数并同时执行。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body onload="myMove()">
<div id ="container">
<div id ="animate">
<p>hello</p>
</div>
</div>
<script>
function myMove() {
setInterval(function(){
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos+
+;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
},3000);
}
$(document).ready(function(){
$("p").text("hi");
});
</script>
</body>
</html>