jQuery .animate () не запускается в первый раз, после этого он работает - PullRequest
Новая
       17

jQuery .animate () не запускается в первый раз, после этого он работает

0 голосов
/ 21 июня 2011 
    <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 голосов
/ 28 июня 2011

Исправлено, используя консоль как минимум.

Проблема в том, что привязанные объекты еще не существуют, когда 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'); });

Таким образом, затухание начнется только после прекращения затухания.

Веселись!

...