Изменить схему работы цикла
jQuery.fn.fade_img = function (ops) {
var jQueryelem = this;
var res = jQuery.extend({ delay: 100, speed: 100 }, ops);
for (var i=0, pause=0, l=jQueryelem.length; i<l; i++, pause+=res.delay) {
jQueryelem.eq(i).delay(pause).fadeIn(res.speed);
}
return jQueryelem;
};
jQuery('.fade').fade_img();
суть такая что по очереди появляются объекты с классом fade а мне нужно добавить условия чтоб они после того как все появятся была пауза 2000мс а потом они все сразу стали невидимые. а потом снова начался цикл с поочередным появлением. |
Вот рабочий пример.
http://jsfiddle.net/ufaclub/5dwy8x68/1/ |
ufaclub,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.fade {
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function()
{
jQuery.fn.fade_img = function (ops) {
var jQueryelem = this;
var res = jQuery.extend({delay: 500, speed: 500, pause : 2000}, ops);
jQueryelem.each(function(indx, element)
{
$(this).delay(indx*res.delay).fadeIn(res.speed);
}
);
jQueryelem.last().queue(function (next)
{
jQueryelem.delay(res.pause).fadeOut().fade_img();
next();
}
);
return jQueryelem;
};
jQuery('.fade').fade_img();
}
);
</script>
</head>
<body>
<div class="fade">1</div>
<div class="fade">2</div>
<div class="fade">3</div>
<div class="fade">4</div>
<div class="fade">5</div>
<div class="fade">6</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:28. |