Ола Ола .... простите за опоздание.
1
Прежде всего: ваш HTML может выглядеть так:
<div style="display:none;"><img src="firstdate.jpg" /></div>
<div style="width:1000px; background-color:#666;margin-left:auto; margin-right:auto">
<div id="sliceContainer">
<!-- FREE UP YOUR HTML, jQuery can do it for you! -->
</div>
</div>
Благодаря небольшому трюку, который клонирует все ваши элементы для вас:
///////// CLONE AND PREPEND SLICES! //////////////
var sliceS = $('<div class="sliceSpecs" class="slice" />');
for (var i = 0; i < 36; i++) { // 36 is 6*6 slices
sliceS.after(sliceS.clone()).prependTo('#sliceContainer');
}
2
Скрыть все ваши кусочки, постепенно уменьшая их до '0'
///////// HIDE ALL SLICES ////////////////////////
$('.sliceSpecs').fadeTo(0,0);
3.
Вам не нужен этот грязный CSS:
#slice1 {background-position:0px 0px;}
#slice6 {background-position:145px 0px;}
#slice5 {background-position:290px 0px;}
... and so on .....
... потому что jQuery может установить для вас css backgroundPosition:
//////// SET BACKGROUND POSITIONS ////////////////
$('.sliceSpecs').each(function(){
var sS = $(this);
sS.css({position:'relative'});
var posX = (sS.position().top);
var posY = (sS.position().left);
sS.css({
backgroundPosition : '-'+ posY +'px -'+ posX +'px'
});
});
4
И после того, как ваши backgroundPosition / s установлены, давайте сделаем некоторые извращения: я использовал здесь свой скрипт из галереи, над которой я работаю ('WOWgallery!').
Это создаст диагональный узор, назначив классы:
1 2 3 4 5 6
2 3 4 5 6 7
3 4 5 6 7 8
4 5 6 7 8 9
5 6 7 8 9 10
6 7 8 9 10 11 <-- you can get all class names visible by uncommenting a line in the code.
Если (Ex.) Вы следуете данному классу '6', вы можете увидеть сгенерированный диагональный узор !
var c1 = 0; // медленный счетчик
var c2 = 0; // быстрый счетчик
var slX = 6;
$('.sliceSpecs').each(function() {
var sl = $(this);
c2++;
if (c2 === (slX + 1)){
c2 = 1;
c1++;
}
sl.addClass('sl' + (c2 + c1));
// sl.html(c2 + c1); // !!! uncomment to test maximal c pattern value
});
Маленький и милый, не правда ли?
* * 5. тысяча сорок-девять
Пора добавить анимацию по времени, верно?:
var c = 0;
function an() {
timeOut = setTimeout(function() {
c++;
if(c === 12){c=0;return;} // IF c === the maximum c patt. value+1
$('.sl' + c).fadeTo(700, 1);
an();
}, 200);
}
an(); // Do the animation
P.S. Я могу прокомментировать код, чтобы помочь вам понять.
Надеюсь, вам понравилась эта демонстрация.
Удачного кодирования!