使用jquery加载div的html页面之间的转换？

Question

我正在尝试使用 jQuery 在 HTML 页面之间创建时尚的过渡。

但是，我只需要淡入淡出 html 页面的内容。

例如：

我有两个页面1.html和2.html

他们都有一个名为#content的DIV

我只需要淡入淡出 div content 而不是整个 html 页面。

我正在使用下面的代码：

<script type="text/javascript">
var speed = 'slow';

$('html, body').hide();
$(document).ready(function() {
    $('html, body').fadeIn(speed, function() {
        $('a[href], button[href]').click(function(event) {
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
            event.preventDefault();
            $('html, body').slideToggle(speed, function() {
                window.location = url;
            });
        });
    });
});
</script>

我也这样尝试过，但没有任何效果：

<script type="text/javascript">
var speed = 'slow';

$('html, body').hide();
$(document).ready(function() {
    $('html, body #content').fadeIn(speed, function() {
        $('a[href], button[href]').click(function(event) {
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
            event.preventDefault();
            $('html, body').slideToggle(speed, function() {
                window.location = url;
            });
        });
    });
});
</script>

这可能吗？

谢谢

Answer 1

试试这个代码

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('a[href], button[href]').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                           
    });

点击功能

$('a[href], button[href]').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

参考这个小提琴

http://jsfiddle.net/fBrYp/2/