Несколько анимаций Fadein в JQuery
Я хотел бы исчезнуть в нескольких прямоугольниках, выровненных горизонтально один за другим. Скажите, что каждая коробка принадлежит классу fadeable и имеет идентификатор. Кроме того, я хотел бы выгладить коробки снаружи. Например:
_ _ _ _ _ _ _ _ _
+_ _ _ _ _ _ _ _
+_ _ _ _ _ _ _ +
+ + _ _ _ _ _ _ +
+ + _ _ _ _ _ + +
+ + + _ _ _ _ + +
и так далее. Каков наилучший способ понять это с помощью jQuery?
Вот что у меня сейчас (примерно) - дайте каждому блоку div автоинкрементный идентификатор метаданных boxid и преформуйте следующее:
max = $(".fadeable:last").attr('boxid');
for(i=0;i<max;i++)
{
$("[boxid=" + i + "]").fadeIn('fast');
$("[boxid=" + (max-i) + "]").fadeIn('fast');
}
Есть ли лучший / более плавный способ сделать это? (с помощью анимации или с помощью очередей?) Кроме того, как лучше расположить элементы в CSS?
Спасибо!
4 ответа
Ну, похоже, твой вопрос вызвал много исследований! Вот что я придумал. Я сделал его больше в стиле плагина jQuery, поэтому из-за него есть некоторый дополнительный код, но его можно легко использовать в вашем проекте. Кроме того, вы можете установить fadeIn в false и он исчезнет по той же схеме:
<!DOCTYPE html >
<html>
<head>
<style type="text/css" media="screen">
#items { height:50px; text-align: center; line-height: 50px; }
#items div {
width: 50px; height: 50px;
float: left; position: relative;
background: red;
opacity: 0.0; -moz-opacity: 0.0; filter:alpha(opacity=0);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$.fn.fadeFromOutside = function(opts){
if(this.size() > 0){
var options = options = $.extend({}, $.fn.fadeFromOutside.defaults, opts),
size = this.size(),
steps = Math.ceil(size / 2), // Always round up
fade_in = options.fadeIn,
time = options.length,
wait = Math.floor(time / steps), // Delay between fades
items = this.css({opacity: (fade_in ? 0.0 : 1.0)}),
fade_to = (fade_in ? 1.0 : 0.0); // Decide what the final opacity should be.
// We are using a private internal function to handle
// the processing and delayed fadeIn.
var fade_action = function(one, two, count_left, delay){
/* If a callback is present, and this is the last iteration
then this sets it up to be called */
var callback = null;
if( options.complete && count_left == (steps - 1))
callback = options.complete;
/* Always animate 'one' */
$(one).animate({opacity: fade_to}, {duration: time, complete: callback});
/* Animate two if its not the same as one.
two will equal one on the last step of odd numbered sets */
if(one != two)
$(two).animate({opacity: fade_to}, time);
if(count_left < steps){
window.setTimeout(function(){
fade_action(
items.get(count_left),
items.get(size - 1 - count_left),
count_left + 1,
delay);
}, delay);
}
}
// Start the fade
fade_action(items.get(0), items.get(size - 1), 1, wait);
}
return this; // Don't break the chain
}
$.fn.fadeFromOutside.defaults = {
fadeIn: true,
length: 1000
}
/* DOM Ready */
$(function(){
$("#items > div").fadeFromOutside({
fadeIn: true, // Set to false to fade out
length: 2000, // Take two seconds
complete: function(){
alert('done!'); // Alert when finished
}
});
});
</script>
</head>
<body>
<div id="items">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
Если элементы начинаются как display:none или они должны исчезнуть и закончиться как display:none затем используйте следующую команду вместо этого, чтобы запустить плагин:
// fadeIn: Assumes the div's start as display:none
$("#items > div")
.css({display: block, opacity: 0.0})
.fadeFromOutside();
// fadeOut: Will hide all divs at the end
$("#items > div")
.fadeFromOutside({
complete: function(){ $("#items > div").hide() }
});
});
Поиграйте с этим:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function createThem()
{
for(var id = 0; id < 15; id++)
{
var el = document.createElement('div');
$(el).attr('rel', id);
$(el).attr('class', 'fadeable');
$(el).css('opacity', '0.0');
$(el).css('display', 'inline');
$(el).css('background', 'green');
$(el).css('float', 'left');
$(el).css('margin-right', '5px');
$(el).text(id);
document.getElementById('container').appendChild(el);
}
}
function fadeThem()
{
var max = $(".fadeable:last").attr('rel');
var timer = 0;
var command = "";
for(i=0;i<max;i++)
{
command = "$('.fadeable[rel=" + i + "]').fadeTo('slow', 1.0);";
command += "$('.fadeable[rel=" + (max-i) + "]').fadeTo('slow', 1.0);";
window.setTimeout(command, timer);
timer += 1000;
}
}
</script>
</head>
<body>
<button onclick="createThem()" value="Create Them">Create Them</button>
<button onclick="fadeThem()" value="Fade Them">Fade Them</button>
<div id="container" style="background:blue;height:200px;width:300px">
<!--div rel="1" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">1</div>
<div rel="2" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">2</div>
<div rel="3" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">3</div>
<div rel="4" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">4</div>
<div rel="5" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">5</div>
<div rel="6" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">6</div>
<div rel="7" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">7</div>
<div rel="8" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">8</div>
<div rel="9" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">9</div>
<div rel="10" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">10</div-->
</div>
</body>
</html>
Исходя из вашего исходного кода, просто сделайте небольшую корректировку:
max = $(".fadeable:last").attr('boxid');
for(i=0;i<max;i++)
{
$("[boxid=" + i + "]").fadeIn('fast', function(){
$("[boxid=" + (max-i) + "]").fadeIn('fast');
});
}
Это может быть не совсем то поведение, которое вам нужно, но идея состоит в том, чтобы связать замирание так, чтобы следующий элемент не начинал анимацию до тех пор, пока последний элемент не завершится.
Это достигается с помощью параметра обратного вызова в функции fadeIn