jquery - 如何在 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();
            });
        }
    });
});

这是小提琴