我的动画效果很好,但我需要帮助来计算 translateX 的正确像素。
目前只计算第一次点击.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();
});
最佳答案
首先,
你的索引是错误的 $(this) 指的是 $('.prev')/$('.next')
var idx = $('.wrap.fadeIn').addClass('fadeout').removeClass('fadeIn').css("transform", "translateX(" + $(this).index() * 160 + "px)").index() - 1;
一旦我解决了这个问题 - 我用 overflow:scroll 查看了你的 .container
第 4 个 .wrap 被包裹到下一行。
增加 ul 的宽度解决了这个问题。
ul { width: 1300px; }
我还发现单位偏移量为 320px(.container 的宽度)
最后 - 我们现在在一行中有了 .wraps 以及正确的索引值和正确的偏移量
将上述值组合在一起
$('.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();
});
我能够实现功能 functional state
我不喜欢后面的 .wraps 延迟造成的空白,所以我根据索引调整了过渡,我得到了 this .
关于 slider 上的 jQuery + css3 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18406692/