开发者

How can I catch the jQTouch animation completion?

I use jQTouch (and its built-in animations) in developing iPhone version of a website. So, I have a static menu:

<ul class="rounded">
  <li class="arrow"><a href="#item1" class="fade">Item 1</a></li>
  <li class="arrow"><a href="#item2" class="fade">开发者_运维知识库Item 2</a></li>
   <li class="arrow"><a href="#item3" class="fade">Item 3</a></li>
   <li class="arrow"><a href="#item4" class="fade">Item 4</a></li>
</ul>

that's included in some div's. My problem is to hide the item that has link with hash same as the id of the div, it belongs to, and same as the location.hash, when the user is on such a page.

So, click event on a link (which moves user to another div with animation) isn't appropriate because the location.hash changes only when the animation completes.

That's the question: How can I catch the jQTouch animation completion to solve the problem? Maybe I can do it with jQuery itself, but how?

Thanks.

EDIT: I've found the solution. So, I post it here.

  $('body > div').bind('pageAnimationEnd', function(){

    //wait a bit for the end of the animation
    //and hash change
    setTimeout(function(){

        //current div id
        divId = '#' + $('.current .toolbar + .section').parent().attr('id');

        //test whether there's a link to the same page
        link = $(divId + ' .rounded li').find('a[href='+divId+']');

        if (   divId == location.hash      
            && link.length > 0 )
        {
            $('a[href='+divId+']').parent().fadeOut(0);
        }
        else
        {
            $('a[href='+divId+']').parent().fadeIn(0);
        }
      }, 100);              
  });


Does this work on Safari and Chrome? For me it only works on Firefox.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜