1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
| if(current == $currentBox.index()){
/* put it back (decrease width,height, and set the top and left like it was before).
the previous positions are saved in the divinfo obj*/
$("#the_lights").css({'display' : 'block'});
$("#the_lights").fadeTo(0.9,0);
$("#the_lights").stop().animate({
'opacity' : '0'
},800,'easeOutBack').fadeOut();
$currentBox.stop().animate({
'top' : divinfo.initial[$currentBox.index()].top,
'left' : divinfo.initial[$currentBox.index()].left,
'width' : '146px',
'height' : '81px'
},800,'easeOutBack').find('.boxcontent').fadeOut();
/* $('.reveal-modal-bg2').css('z-index','0');
$('.reveal-modal-bg2').css('background','rgba(0,0,0,0)');
*/
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
var elemTop = divinfo.initial[$ele.index()].top;
var elemLeft = divinfo.initial[$ele.index()].left;
/* var elemZindex = divinfo.initial[$ele.index()].z-index;
*/ $ele.stop().show().animate({
'top' : elemTop,
'left' : elemLeft,
/* 'z-index' : elemZindex,
*/ 'opacity' : 1
},800);
});
$('#frame-bottom').css('z-index','1999');
$('#frame-top').css('z-index','1999');
current = -1;
}
/* if we are clicking on a small box : */
else{
/* randomly animate all the other boxes.
Math.floor(Math.random()*601) - 150 gives a random number between -150 and 450.
This range is considering the initial lefts/tops of the elements. It's not the exact right
range, since we would have to calculate the range based on each one of the boxes. Anyway, it
fits our needs...
*/
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
$ele.stop().animate({
'top' : (Math.floor(Math.random()*601) - 150) +'px',
'left': (Math.floor(Math.random()*601) - 150) +'px',
/* 'z-index' : 999,
*/ 'opacity':0
},800,function(){
$(this).hide();
});
});
/* expand the clicked one. Also, fadeIn the content (boxcontent)
if you want it to fill the space of the littleBoxes container,
then these are the right values */
var newwidth = $this.next('div').width();
/*var newheight = 679;*/
var newheight = $this.next('div').height();
var newZindex = 999;
var newleft = ((438 - newwidth) / 2);
/*alert(newleft);*/
$currentBox.stop().animate({
'top' : '-100px',
'left' : newleft,
'z-index' : newZindex,
'width' : newwidth +'px',
'height': newheight+'px'
},800,'easeOutBack',function(){
current = $currentBox.index();
$(this).find('.boxcontent').fadeIn();
});
} |
Partager