jQuery + css3 transition on a slider -
my animations works well, need calculate correct pixels translatex.
currenltly calculates first click on .next .prev
$('.prev').click(function(e) { e.preventdefault(); var idx = $('.wrap.fadein').addclass('fadeout').removeclass('fadein').css("transform", "translatex(" + $(this).index() * 160 + "px)").index() - 1; $('.wrap').eq(idx).addclass('fadein').removeclass('fadeout').css("transform", "translatex(" + $(this).index() * -0 + "px)"); updatenav(); }); $('.next').click(function(e) { e.preventdefault(); var idx = $('.wrap.fadein').addclass('fadeout').removeclass('fadein').css("transform", "translatex(" + $(this).index() * -160 + "px)").index() + 1; $('.wrap').eq(idx).addclass('fadein').removeclass('fadeout').css("transform", "translatex(" + $(this).index() * -160 + "px)"); updatenav(); });
http://jsfiddle.net/jqq5n/462/ (firefox)
firstly,
your index wrong $(this) refers $('.prev') / $('.next')
var idx = $('.wrap.fadein').addclass('fadeout').removeclass('fadein').css("transform", "translatex(" + $(this).index() * 160 + "px)").index() - 1;
once sorted out - viewed .container overflow:scroll
the 4th .wrap being wrapped next row.
increasing width of ul solved problem.
ul { width: 1300px; }
i found unit offset 320px ( .container's width )
finally - have .wraps in 1 line , correct index value , correct offset
bringing above values like
$('.prev').click(function (e) { e.preventdefault(); var idx = $('.wrap.fadein').index() - 1; $('.wrap.fadein').addclass('fadeout').removeclass('fadein') .css("transform","translatex(" + 320 * idx + "px)").index() - 1; $('.wrap').eq(idx).addclass('fadein').removeclass('fadeout') .css("transform", "translatex(" + -320 * idx + "px)"); updatenav(); }); $('.next').click(function (e) { e.preventdefault(); var idx = $('.wrap.fadein').index() + 1; $('.wrap.fadein').addclass('fadeout').removeclass('fadein') .css("transform", "translatex(" + -320 * idx + "px)").index() + 1; $('.wrap').eq(idx).addclass('fadein').removeclass('fadeout') .css("transform", "translatex(" + -320 * idx + "px)"); updatenav(); });
i able achieve functionality functional state
i did not white space caused delay later .wraps tweaked transition based on index , got this.
Comments
Post a Comment