JQuery анимация переворачивается

Question

Ради интереса я пытался оживить объект и загрузить контент после него, потому что мне понравилась идея. Это работает, но есть ошибка в jQuery, я думаю, что я не могу в настоящее время справиться. Divbox 'nav' должен анимироваться наверх и придерживаться там! после этого он должен загрузить контент. Это работает, но навигационная панель не будет придерживаться вершины в 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

Посмотрим теперь ...

1. Обработчики двух кликов присваивают элементам a, оба отправляют запросы ajax на разные URL.
2. $('#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);
}