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

I need your help!

我需要你的帮助！

I need some help to add some animation for my code. Now it works like - Click on link -> fade in text -> click on another link -> fade out current text -> fade in new text.

我需要一些帮助来为我的代码添加一些动画。现在它的工作方式如下 - 单击链接 - >淡入文本 - >单击另一个链接 - >淡出当前文本 - >淡入新文本。

What I want is like this - Click on link -> #content animates down to xx:px (depending on content height that loads in) -> fade in text -> Click on link -> current text fades out and #content animates up -> #content animates down to xx:px (depending on content height that loads in) -> fade in text

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

Here is the code so far...

这是迄今为止的代码......

Updated here is the jsfiddle - but the ajax thing don´t work http://jsfiddle.net/jelm/7zLW5/2/ Or you can take a look at my test page http://landetdigital.se/olaselmen/

这里更新的是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;
});
});

2 个解决方案

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

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

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