jQuery .animate() 第一次不会触发，之后它就可以工作了

Question

    <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>

Answer 1

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

问题是，当动画想要随心所欲时，锚定对象还不存在。由于某种原因，它第二次起作用。

但解决方案如下：使用“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'); });

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

玩得开心！