jQuery fadeOut/fadeIn 效果帮助。（jsfiddle）

发布于 2024-12-24 03:52:19 字数 249 浏览 0 评论 0 原文

我正在运行一个基本脚本来创建滑块效果。我将其设置为简单地切换元素。我不只是切换，而是希望创建淡出/淡入效果。我发现的文档似乎每个脚本都不同...是否有基本或初学者级别的方法可以将淡入淡出效果添加到预先存在的脚本中？先感谢您。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吐个泡泡 2024-12-31 03:52:19

最简单的方法是使用 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/

The simplest way is to use jquery's fadeIn() and fadeOut() methods.

$('div').fadeIn();

The documentation for these methods(fadeIn(), fadeOut()) has great examples.

EDIT

Here's how I would alter your code to make use of it:

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

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

Basically, you want to wait until fadeOut is complete to fade in the next item. Other than that, your code is pretty much the same.

Updated fork of your fiddle - http://jsfiddle.net/9BQTH/2/

回复收藏 0 原文