Я сделал на Кувери, т.к. это было быстрее, чем на native. Надеюсь, Вы не против
.
Сам код скрипта и пример находятся ниже.
Подготовка:
Div-родитель имеет класс "marga". Чтобы изменить его в соотв. требованиям скрипта, меняем указанный селектор.
marga = $("*!*.marga*/!*"),
Анимируемые элементы (т.е. то, что движется) никак не помечены. Это просто дивы.
Чтобы как-то их идентифировать, добавьте им класс, и измените селектор :
divs = marga.find("*!*div*/!*").hide(),
Div-родитель должен иметь позиционирование, отличное от static. В примере я поставил относительное.
Анимируемые элементы должны иметь относительное позиционирование.
Желательно, чтобы Div-родитель имел статическую ширину и высоту.
О настройках эффектов :
Настройки находятся в самом начале скрипта. Все они напрямую передаются методам jQuery.
// время появления (перед анимированием вверх)
fadeIn_time = 400,
// время анимирования вверх - всплытия.
bubble_time = 2000,
// easing-функция всплытия. см. параметр easing функции animate.
bubble_easing = "swing",
// время ожидания после всплытия.
stay_time = 2000,
// время скрытия после всплытия.
fadeOut_time = 800,
Пример :
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title></title>
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
.marga {
background-color: #BADA55;
position: relative;
width: 300px;
height: 400px;
}
.marga div {
position: relative;
border: 1px red dashed;
}
</style>
</head>
<body>
<div class="marga">
<div>предложение1</div>
<div>предложение2</div>
<div>предложение3</div>
</div>
<script>
$(function(){
var
fadeIn_time = 400,
bubble_time = 2000,
bubble_easing = "swing",
stay_time = 2000,
fadeOut_time = 800,
marga = $(".marga"),
divs = marga.find("div").hide(),
bottomeness = marga.height(),
i = 0,
curr;
(function loop(next){
divs.eq(i - 1).hide();
if (!divs[i]) {
i = 0;
}
curr = divs.eq(i);
curr.
fadeIn(fadeIn_time).
css("top", bottomeness - curr.outerHeight()).
animate({ top: 0 }, bubble_time, bubble_easing).
delay(stay_time).
fadeOut(fadeOut_time).
queue(loop);
i += 1;
if (next) {
next();
}
})();
});
</script>
</body>
</html>