我正在创建一个实用方法,它有助于使用 jQuery 顺序淡化元素。正如您在下面的代码中看到的那样,我添加了一个额外的类作为alreadyFadedIn
标志。在方法调用结束时,sequentiallyFadeIn(...)
我想执行cleanUp
我想删除我在sequentiallyFadeIn(...)
方法内的选定元素中添加的标志类的位置。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function sequentialFadeIn(selectorText, speed, display, callBack) {
display = typeof display !== 'undefined' ? display : "block";
function helper() {
nextElementToFadeIn = $(selectorText).not(".alreadyFadedIn").first();
nextElementToFadeIn.fadeIn(speed, function() {
$(this).addClass("alreadyFadedIn");
helper();
}).css("display", display);
}
helper();
callBack(selectorText);
}
sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block",function cleanUp(selectorText1){
$(selectorText1).removeClass("alreadyFadedIn");
console.log("Clean up has been performed.");
console.log("Selector Text: " +selectorText1);
} );
});
</script>
</head>
<body><style media="screen" type="text/css">
.hello {
background-color: blue;
height:50px;
width: 50px;
display: none;
}
</style>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
</body></html>
在查看检查元素时,我注意到该类alreadyFadedIn
没有被删除。在我看来,原因是 cleanUp 方法sequentiallyFadeIn
与helper()
. 您还可以注意到日志消息“已执行清理”。甚至在 div 完成淡入之前就被打印出来。
如何cleanUp
在方法中的主要逻辑完成后执行调用sequentiallyFadedIn
?有什么建议么?
jsfiddle 上的代码:http: //jsfiddle.net/BztLx/11/