"
Team:UniSalento Lecce/js/slider.js
From 2013.igem.org
(Created page with "$(function() { var left = { imgFront : -450, imgBack : -350, h3 : -300, p : -275, a : -200 } var current = { imgFront : 70, ...") |
|||
| Line 40: | Line 40: | ||
oldI.find('img.img-front') | oldI.find('img.img-front') | ||
| - | |||
.animate({ | .animate({ | ||
| - | left: | + | left: left.imgFront |
}); | }); | ||
oldI.find('img.img-back') | oldI.find('img.img-back') | ||
| - | .delay( | + | .delay(100) |
.animate({ | .animate({ | ||
| - | left: | + | left: left.imgBack |
}); | }); | ||
| Line 54: | Line 53: | ||
.delay(200) | .delay(200) | ||
.animate({ | .animate({ | ||
| - | left: | + | left: left.h3 |
}); | }); | ||
oldI.find('p') | oldI.find('p') | ||
| - | .delay( | + | .delay(300) |
.animate({ | .animate({ | ||
| - | left: | + | left: left.p |
}); | }); | ||
oldI.find('a') | oldI.find('a') | ||
| + | .delay(400) | ||
.animate({ | .animate({ | ||
| - | left: | + | left: left.a |
}); | }); | ||
}, | }, | ||
| Line 96: | Line 96: | ||
newI.find('img.img-front') | newI.find('img.img-front') | ||
.css({ | .css({ | ||
| - | left: | + | left: right.imgFront |
| - | } | + | }) |
.animate({ | .animate({ | ||
left: current.imgFront | left: current.imgFront | ||
| - | |||
| - | |||
}); | }); | ||
newI.find('img.img-back') | newI.find('img.img-back') | ||
.css({ | .css({ | ||
| - | left: | + | left: right.imgBack |
| - | }).delay( | + | }).delay(100) |
.animate({ | .animate({ | ||
left: current.imgBack | left: current.imgBack | ||
| Line 114: | Line 112: | ||
newI.find('h3') | newI.find('h3') | ||
.css({ | .css({ | ||
| - | left: | + | left: right.h3 |
}).delay(200) | }).delay(200) | ||
.animate({ | .animate({ | ||
| Line 122: | Line 120: | ||
newI.find('p') | newI.find('p') | ||
.css({ | .css({ | ||
| - | left: | + | left: right.p |
| - | }).delay( | + | }).delay(300) |
.animate({ | .animate({ | ||
left: current.p | left: current.p | ||
| Line 130: | Line 128: | ||
newI.find('a') | newI.find('a') | ||
.css({ | .css({ | ||
| - | left: | + | left: right.a |
| - | }) | + | }).delay(400) |
.animate({ | .animate({ | ||
left: current.a | left: current.a | ||
| + | }, function() { | ||
| + | isScrolling = false; | ||
}); | }); | ||
| - | } | + | } }, |
| - | + | ||
prev : { | prev : { | ||
button : '#prev', | button : '#prev', | ||
Latest revision as of 13:25, 8 August 2013
$(function() { var left = { imgFront : -450, imgBack : -350, h3 : -300, p : -275, a : -200 } var current = { imgFront : 70, imgBack : 300, h3 : 615, p : 615, a : 615 } var right = { imgFront : 990, imgBack : 990, h3 : 990, p : 990, a : 990 }
var isScrolling = false;
$('#carousel').carouFredSel({ scroll : { duration : 0, pauseDuration : 10000 }, auto : {
conditions : function() { return (!isScrolling); }, onBefore : function(oldI, newI) { isScrolling = true;
$(this).delay(900);
oldI.find('img.img-front') .animate({ left: left.imgFront });
oldI.find('img.img-back') .delay(100) .animate({ left: left.imgBack });
oldI.find('h3') .delay(200) .animate({ left: left.h3 });
oldI.find('p') .delay(300) .animate({ left: left.p });
oldI.find('a') .delay(400) .animate({ left: left.a }); }, onAfter: function(oldI, newI) { oldI.find('img.img-front') .css({ left: current.imgFront });
oldI.find('img.img-back') .css({ left: current.imgBack });
oldI.find('h3') .animate({ left: current.h3 });
oldI.find('p') .css({ left: current.p });
oldI.find('a') .css({ left: current.a });
newI.find('img.img-front') .css({ left: right.imgFront }) .animate({ left: current.imgFront });
newI.find('img.img-back') .css({ left: right.imgBack }).delay(100) .animate({ left: current.imgBack });
newI.find('h3') .css({ left: right.h3 }).delay(200) .animate({ left: current.h3 });
newI.find('p') .css({ left: right.p }).delay(300) .animate({ left: current.p });
newI.find('a') .css({ left: right.a }).delay(400) .animate({ left: current.a }, function() { isScrolling = false; }); } }, prev : { button : '#prev', conditions : function() { return (!isScrolling); }, onBefore : function(oldI, newI) { isScrolling = true;
$(this).delay(900);
oldI.find('img.img-front') .delay(400) .animate({ left: right.imgFront });
oldI.find('img.img-back') .delay(300) .animate({ left: right.imgBack });
oldI.find('h3') .delay(200) .animate({ left: right.h3 });
oldI.find('p') .delay(100) .animate({ left: right.p });
oldI.find('a') .animate({ left: right.a }); }, onAfter: function(oldI, newI) { oldI.find('img.img-front') .css({ left: current.imgFront });
oldI.find('img.img-back') .css({ left: current.imgBack });
oldI.find('h3') .animate({ left: current.h3 });
oldI.find('p') .css({ left: current.p });
oldI.find('a') .css({ left: current.a });
newI.find('img.img-front') .css({ left: left.imgFront }).delay(400) .animate({ left: current.imgFront }, function() { isScrolling = false; });
newI.find('img.img-back') .css({ left: left.imgBack }).delay(300) .animate({ left: current.imgBack });
newI.find('h3') .css({ left: left.h3 }).delay(200) .animate({ left: current.h3 });
newI.find('p') .css({ left: left.p }).delay(100) .animate({ left: current.p });
newI.find('a') .css({ left: left.a }) .animate({ left: current.a }); } }, next : { button : '#next', conditions : function() { return (!isScrolling); }, onBefore : function(oldI, newI) { isScrolling = true;
$(this).delay(900);
oldI.find('img.img-front') .animate({ left: left.imgFront });
oldI.find('img.img-back') .delay(100) .animate({ left: left.imgBack });
oldI.find('h3') .delay(200) .animate({ left: left.h3 });
oldI.find('p') .delay(300) .animate({ left: left.p });
oldI.find('a') .delay(400) .animate({ left: left.a }); }, onAfter: function(oldI, newI) { oldI.find('img.img-front') .css({ left: current.imgFront });
oldI.find('img.img-back') .css({ left: current.imgBack });
oldI.find('h3') .animate({ left: current.h3 });
oldI.find('p') .css({ left: current.p });
oldI.find('a') .css({ left: current.a });
newI.find('img.img-front') .css({ left: right.imgFront }) .animate({ left: current.imgFront });
newI.find('img.img-back') .css({ left: right.imgBack }).delay(100) .animate({ left: current.imgBack });
newI.find('h3') .css({ left: right.h3 }).delay(200) .animate({ left: current.h3 });
newI.find('p') .css({ left: right.p }).delay(300) .animate({ left: current.p });
newI.find('a') .css({ left: right.a }).delay(400) .animate({ left: current.a }, function() { isScrolling = false; }); } } }); });
