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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -