jQuery .animate()在第一次激活之后才开始工作

时间:2011-06-21 17:15:21

标签: jquery scroll jquery-animate anchor

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

1 个答案:

答案 0 :(得分:0)

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

问题是,当动画想要使用它时,锚定对象还不存在。由于某种原因,它第二次工作。

但解决方案如下:使用“实时”方法而不是“点击”。它看起来像这样:

$('.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'); });

这样,fadein只会在淡出停止时开始。

玩得开心!