滑块上的 jQuery + css3 过渡答案

【问题标题】：jQuery + css3 transition on a slider滑块上的 jQuery + css3 过渡
【发布时间】：2013-08-26 17:35:37
【问题描述】：

我的动画效果很好，但我需要帮助来计算 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();
});

http://jsfiddle.net/JQq5n/462/（火狐）

【问题讨论】：

这可以很容易地使用 jquery 动画，但我相信 css3 过渡是未来:-)

标签： jquery css css-transitions translate-animation

【解决方案1】：

首先，

您的索引错误 $(this) 指的是 $('.prev') / $('.next')

var idx = $('.wrap.fadeIn').addClass('fadeout').removeClass('fadeIn').css("transform", "translateX(" + $(this).index() * 160 + "px)").index() - 1;

一旦我把它整理出来 - 我用溢出查看了你的 .container:scroll

第 4 个 .wrap 被包裹到下一行。

增加ul的宽度解决了这个问题。

ul { 宽度：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。

【讨论】：