如何在jquery中制作交易效果（淡入淡出，滑动，模糊​​）

Question

我有一个示例html文件（带有虚拟文本），并使用了jquery，看到这个小提琴 -

>    [demo][1]

当你按下prev和next时，它会显示div中的prev和next元素。

它的效果非常好，但是我希望为它设置动画，这意味着我想在下一次按下时添加一个事务，比如淡入淡出效果或幻灯片效果，非常有吸引力。

这可以用jQuery实现吗？如果有志愿者帮助我，那将是一种莫大的荣誉。

[1]：http://jsfiddle.net/gr8_boi52/dnKWU/]

Answer 1

对于淡入淡出效果，您可以在jQuery中使用.fadeIn()或.fadeOut()

查看更新的小提琴http://jsfiddle.net/dnKWU/3/

Answer 2

您可以使用.animate()，简单使用.fadeIn() / .fadeOut()。我更新了你的js代码：

jQuery(function($) {
    $('#sentences *').eq(0).addClass('current'); // start by showing the first sentence
    $('#nextBtn, #prevBtn').click(function() {
        var currItem = $('#sentences .current');
        var newItem = ($(this).attr('id') == 'nextBtn') ? currItem.next() : currItem.prev();
        if (newItem.size() > 0) {
            currItem.fadeOut(function() {
                currItem.removeClass('current');
                newItem.addClass('current').fadeIn();
            });
        }
    });
});

这是Fiddle