Question

我创建了一个滑块，当点击上一个或下一个按钮时，我试图在每张幻灯片上触发css3效果（就像页面加载时一样）

我在这里创造了一个小提琴：http://jsfiddle.net/g5c9T/6/

$('.slider').bxSlider({
    auto: false,
    mode: 'fade'
});

$('.slider').addClass('load');

$('.bx-prev, .bx-next').click(function () {
    $('.slider').removeClass('load');
    $('.slider').addClass('load');
});

在上面我试图删除加载类并再次添加它以便再次应用css3效果但这似乎不起作用。

*编辑，我错过了删除/添加'加载'

Answer 1

试试这个，http://jsfiddle.net/g5c9T/8/

$('.bx-prev, .bx-next').click(function () {
    $('.slider').removeClass('load');
    setTimeout(function(){
    $('.slider').addClass('load');
    },10);
});

如果你在jquery中需要更好的动画，请查看这个插件，它有助于更多ricostacruz.com/jquery.transit

Answer 2

我发现html实际上需要刷新才能使css动画始终生效。 http://jsfiddle.net/g5c9T/13/

$('.bx-prev, .bx-next, .bx-pager-item').click(function(){
    $('.slider div').each(function(){
        var $this = $(this);
        $this.html($this.html());
    });
});

jQuery / css3触发效果

2 个答案: