jQuery .animate() 第一次没有触发，之后它开始工作答案

【问题标题】：jQuery .animate() doesn't fire the first time, after that it's workingjQuery .animate() 第一次没有触发，之后它开始工作
【发布时间】：2011-06-21 17:15:20
【问题描述】：

    <script type="text/javascript">

$(document).ready(function(){

    $.cacheImage(['bilder/in_bearbeitung.png'])

    var cache = {'': $('.startseite')};

  $(window).bind( 'hashchange', function(e) {

    var url = $.param.fragment();

    if (url == ("telefonmeeting.html") || url == ("vorteile.html") || url == ("faq.html") || url == ("flatrate.html") || url == ("unternehmen.html") || url == ("impressum.html") || url == ("kontakt.html") || url == ("agb.html") || url == ("facebook.html") || url == ("news.html") || url == ("links.html")) 

    {
    $( '.inhalt-container' ).fadeOut();

    }

    if ( cache[ url ] ) 

    {

    cache[ url ].fadeIn();      

    }

     if (url == ("telefonmeeting.html") || url == ("vorteile.html") || url == ("faq.html") || url == ("flatrate.html") || url == ("unternehmen.html") || url == ("impressum.html") || url == ("kontakt.html") || url == ("agb.html") || url == ("facebook.html") || url == ("news.html") || url == ("links.html"))

     {

        $('html, body').animate({scrollTop:0}, 'fast');

        cache[ url ] = $( '<div class="inhalt-"/>' )

            .appendTo( '.inhalt-container' )

        $( '.inhalt-container' ).load( url , function( data ){

        $(this).html( data );
        $(this).fadeIn();

        });

    }

    else if (url == ("_1") || url == ("_2"))

    {

        $('.inhalt-container, .link , .sublink').click(function(event){
            //prevent the default action for the click event
            event.preventDefault();

            //get the full url - like mysitecom/index.htm#home
            var full_url = this.href;

            //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
            var parts = full_url.split("#");
            var trgt = parts[1];

            //get the top offset of the target anchor
            var target_offset = $("#"+trgt).offset();
            var target_top = target_offset.top;                          

            //goto that anchor by setting the body scroll top to anchor top
            $('html, body').animate({"scrollTop":target_top}, 750);

        });

    }

   })

  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).trigger( 'hashchange' );

});

</script>

【问题讨论】：

你调试过，看看target_top的值是多少？
你有一个工作演示，也许是一个 jsfiddle？
为我工作：jsfiddle.net/Fj9LY 任何其他可能干扰此的代码或 HTML 标记？你在什么浏览器上测试？
我正在 Firefox 4.0 上测试网站
你可以在link看到开发页面。第三个链接“Fragen und Antworten”打开了锚点。你想让我做一个 jsFiddle 吗？

标签： jquery scroll jquery-animate anchor

【解决方案1】：

已修复，至少使用控制台。

问题在于，当 animate 想要使用它时，锚定对象还不存在。出于某种原因，它会再次运行。

但是解决方法如下：使用“live”方法而不是“click”。它看起来像这样：

$('.link , .sublink').live('click', function(event){
        //prevent the default action for the click event

        event.preventDefault();

        //get the full url - like mysitecom/index.htm#home

        var full_url = this.href;

        //split the url by # and get the anchor target name - home in mysitecom/index.htm#home

        var parts = full_url.split("#");

        var trgt = parts[1];

        //get the top offset of the target anchor

        var target_offset = $("#"+trgt).offset();

        var target_top = target_offset.top;

        //goto that anchor by setting the body scroll top to anchor top

        $('html, body').animate({"scrollTop":target_top}, 750);

    });

当我将它粘贴到控制台时，这对我有用，所以我希望它也对你有用。

顺便说一句，还要解决您遇到的褪色问题。使用回调方法进行淡出，如下所示：

$('.something').fadeOut('slow', function(){ $('.otherthing').fadeIn('slow'); });

这样，淡入只会在淡出停止时开始。

玩得开心！

【讨论】：