jQuery fadeOut / fadeIn效果帮助。 (的jsfiddle)

时间:2012-01-02 23:22:50

标签: jquery jquery-effects

我运行了一个基本脚本来创建滑块效果。我把它设置为简单地切换元素。而不仅仅是切换,我希望创建一个fadeOut / fadeIn效果。我发现的文档似乎与每个脚本不同...是否有基本或初学者级别的方法来将淡入淡出效果添加到预先存在的脚本?提前谢谢。

的jsfiddle: http://jsfiddle.net/williamwong/865gG/1/

2 个答案:

答案 0 :(得分:1)

最简单的方法是使用jquery的fadeIn()fadeOut()方法。

$('div').fadeIn();

这些方法的文档(fadeIn()fadeOut())有很好的例子。

修改

以下是我将如何更改您的代码以使用它:

var cycle = window.setInterval(next, 2000);

function next() {
    $('#slides .current').fadeOut(function(el) {
        $(this).removeClass('current').next().add('#slides :first').last().addClass('current').fadeIn()
        });
}

基本上,你要等到fadeOut完成才能淡入下一个项目。除此之外,您的代码几乎相同。

更新了你的小提琴 - http://jsfiddle.net/9BQTH/2/

答案 1 :(得分:0)

我的猜测是你可以使用opacity属性来使用animate(),hide(),show()函数。