Question

为了好玩，我尝试动画一个对象并在其后加载内容，因为我喜欢这个主意。它正在工作，但我猜这是jQuery中的一个错误，我目前无法处理。 Divbox'nav'应该动画到顶部并且在那里贴上STICK！之后，它应该加载内容。它正在运行，但导航盒不会在Firefox 4.0中坚持到顶部。在Firefox 3.5中没有动画！ Firefox 5.0和Opera 11正在为我工作。任何人都有解决这个问题的方法吗？

jQuery代码：

jQuery.fn.center = function(centerCallback) {
    this.css("position", "absolute");
    this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
    if (centerCallback != undefined) {
        centerCallback(this);
        return this;
    }
}

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


    $('#main_navigation a').click(function() {
        var toLoad = $(this).attr('href') + ' #content';
        $('#content').hide('fast', loadContent);
        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;

    });
});


var navi_switch = true;
var content_container = 'test';
$(document).ready(function() {
    $('#wrapper').center(function() {
        $('#main_navigation').css("top", (parseInt($('#main_navigation').parent().height()) - parseInt($('#main_navigation').height())) / 2 + "px");
    });

    $('#main_navigation a').click(function() {
        var attr = $(this).attr('href');
        if (navi_switch) {
            $('#main_navigation').animate({
                top: '0'
            }, 500, function() {
                navi_switch = false;
                $('#content').load(attr);
            });
        } else {
            $('#content').load(attr);
        }


        return false;
    });
});

问候

Answer 1

让我们看看......

两个点击处理程序分配给a元素，两者都向不同的网址发出ajax请求。
$('#content').load(attr);不使用#content来过滤结果..

也

function loadContent() {  
    $('#content').load(toLoad,'',showNewContent())  
}  
function showNewContent() {  
    $('#content').show('normal',hideLoader());  
}

应该是

function loadContent() {  
    $('#content').load(toLoad,'',showNewContent /*no parenthesis here, just passing a callback */)  
}  
function showNewContent() {  
    $('#content').show('normal',hideLoader /*no parenthesis here, just passing a callback */);  
}

修复这些问题以便开始，如果问题仍然存在，请回来......

合并零件

jQuery.fn.center = function(centerCallback) {
    this.css("position", "absolute");
    this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
    if (centerCallback != undefined) {
        centerCallback(this);
        return this;
    }
}

var navi_switch = true;
var content_container = 'test';

$(document).ready(function() {

    loadInitialContent(); // call our function to load the initial content based on url hash
    $('#wrapper').center(function() {
        $('#main_navigation').css("top", (parseInt($('#main_navigation').parent().height()) - parseInt($('#main_navigation').height())) / 2 + "px");
    });

    $('#main_navigation a').click(function() {
        var href = $(this).attr('href'); // get the href
        window.location.hash = href.substr(0, href.length - 5); // change the hash of the url
        href += ' #content'; // add the #content filter to the href
        if (navi_switch) {
            $('#main_navigation').animate({
                top: '0'
            }, 500, function() {
                navi_switch = false;
                $('#content').hide('fast', function(){
                   $(this).load(href, function(){
                      $(this).show('normal', function(){
                          $('#load').fadeOut('normal');
                      });
                   });
                });

            });
        } else {
               $('#content').hide('fast', function(){
                   $(this).load(href, function(){
                      $(this).show('normal', function(){
                          $('#load').fadeOut('normal');
                      });
                   });
                });
        }

        return false;
    });
});

function loadInitialContent() {
    var hash = window.location.hash.substr(1);
    var href = $('#main_navigation a[href^="' + hash + '."]').attr('href') + ' #content';
    $('#content').load(href);
}

jQuery动画翻转回来

1 个答案: