代码之家 › 专栏 › 技术社区 › Ed James

不能使fadein和fadeout同步动作?

effects jquery

1

Ed James · 技术社区 · 16 年前

我尝试使用jquery在两个图像之间设置动画,一个图像淡出,另一个图像淡入。

但是,我不能让他们同步操作,fadeIn()总是在fadeOut()完成之前被调用:

$(function() {
            var tabContainers = $('#tabwrap > div');
            var listItems = $('#tabwrap ul.tabnav li');
            listItems.click(function() {
                var second = tabContainers.filter($(this)[0].title);
                tabContainers.fadeOut('slow', function() {
                    second.fadeIn('slow');
                });

            $('#tabwrap ul.tabnav').removeClass('selected');
            $(this).addClass('selected');

            return false;
        }).filter(':first').click();

        listItems.hover(function() {
        });
    });

<div>
        <div id="tabwrap">
            <div id="tab1">
                Tab1</a>
            </div>
            <div id="tab2">
                Tab2</a>
            </div>
            <div id="tab3">
                Tab3</a>
            </div>
            <div id="tab4">
                Tab4</a>
            </div>
            <ul class="tabnav">
                <li title="#tab1" style="cursor: pointer;">Tab1</li>
                <li title="#tab2" style="cursor: pointer;">Tab2</li>
                <li title="#tab3" style="cursor: pointer;">Tab3</li>
                <li title="#tab4" style="cursor: pointer;">Tab4</li>
            </ul>
        </div>
    </div>

有什么想法吗?

干杯,Ed

5 回复 | 直到 12 年前

1

Mutation Person 16 年前

我想问题是当你打电话给 fadeOut 功能,您的一些项目已经淡出,以便它立即启动。

下面的代码是经过测试的,可以工作的,但是可以进一步改进。我把这个留给你:

var tabContainers = $('#tabwrap > div');
var listItems = $('#tabwrap ul.tabnav li');
tabContainers.hide();
var $selectedDiv = $("#tab1").show();

listItems.click(function() {
    var $this = $(this);
    var $myDiv = $("#" + $this.text().toLowerCase());
    if ($selectedDiv.attr("id") != $myDiv.attr("id")) {
        $selectedDiv.fadeOut('slow', function() {
            $myDiv.fadeIn('slow');
        });
        $selectedDiv = $myDiv;
    }

    $('#tabwrap ul.tabnav').removeClass('selected');
    $(this).addClass('selected');

    return false;
});

2

0

user229044 16 年前

写的代码…

tabContainers.fadeOut('slow', function() {
    second.fadeIn('slow');
});

显式调用 fadeIn() 之后 fadeOut() 是完整的。您将fadein作为回调传递给fadeout的第二个参数,在完成时执行。

你试过这个吗?

tabContainers.fadeOut('slow');
second.fadeIn('slow');

3

0

davidosomething 16 年前

尝试将动画排队,而不是在回调时运行:

tabContainers.fadeOut('slow').queue(function() {
    second.fadeIn('slow');
    $(this).dequeue();
});

4

0

Josh Mein 16 年前

编辑: 实际上,你可以这样试试

tabContainers.fadeOut(500);
setTimeout("FadeInImage();", 490);

function FadeInImage()
{
    tabContainers.hide();
    second.fadeIn('slow');
}

5

0

Sam Rueby 14 年前

另一种让jquery等待动画结束的方法是 promise() 方法。当代码的另一部分需要等待,而您对要等待的对象没有句柄时,可以使用jquery选择器获取它们,然后调用promise等待所有返回的对象完成。

例如。 $('.animating').promise().done(function( arg1 ) { alert( "Done animating."); });