Question

我需要你的帮助！

我需要一些帮助来为我的代码添加一些动画。现在它像 - 点击链接 - ＆gt;淡入文字 - ＆gt;点击另一个链接 - ＆gt;淡出当前文本 - ＆gt;淡入新文本。

我想要的是这样 - 点击链接 - ＆gt; #content animates down to xx：px（取决于加载的内容高度） - ＆gt;淡入文字 - ＆gt; 点击链接 - ＆gt;当前文本淡出并且#content animates up - ＆gt; #content animates down to xx：px（取决于加载的内容高度） - ＆gt;淡入文字

到目前为止，这是代码......

更新了这里是jsfiddle - 但是ajax的功能不起作用http://jsfiddle.net/jelm/7zLW5/2/ 或者您可以查看我的测试页http://landetdigital.se/olaselmen/

$(document).ready(function() {  
    $('.menu li a').click(function() {

       $('#contentHolder').fadeOut("fast");
        var targetPage = $(this).attr('href');

    setTimeout(function() {
        $('#content').load(targetPage, function() {
            $('#contentHolder').fadeIn("slow");
        });
    });

 return false;
});
});

Answer 1

这可以通过在fadeIn（）和fadeOut（）中使用回调来实现。

例如，如果您希望在$('#contentHolder').fadeIn('slow')之后完成某项操作，则可以通过以下方式执行此操作：

$('#contentHolder').fadeIn('slow',function(){ 
    alert('#contentHolder was faded in!');
})

Answer 2

我要做的是获得新内容的正确高度，将刚加载的内容放入隐藏的div中并检索其高度。然后将显示的div设置为正确的高度，并删除临时高度。

获得div的高度：

.css({ display: 'none' });

..不起作用，使用：

.css({'position':'absolute','visibility':'hidden', 'display':'block'});

...来代替。

使用AJAX和动画加载内容 - jQuery

2 个答案: