一个接一个地缩小和淡入div

时间:2013-09-06 16:07:19

标签: javascript jquery zoom fade

用户/编码员“Atharva”发布了以下代码, 作为以下主题Fade in divs one after another

中的一个选项

我发送给“Atharva”非常感谢他的代码, 这完全符合我的目的, 但我想添加一个ZOOM OUT动画。

我有HTML / CSS的基本/中等知识,但是使用JAVA我是零。

有人可以帮助我制作这个动画吗?

以下是代码:

<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";

    var els = $(selectorText), i = 0;

    (function helper() {
        els.eq(i++).fadeIn(speed, helper).css("display", display);
        if (callback && i === els.length) callback();
    })();
}

sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block", function() {
    console.log("I am just an optional callback");
});​
});
</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>

实时样本,in CodePEN

谢谢....

0 个答案:

没有答案