Question

我在开发iPhone版网站时使用jQTouch（及其内置动画）。所以，我有一个静态菜单：

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

包含在某些div中。我的问题是当用户在这样的页面上时，隐藏具有与id的{{1}}相同的散列的项目，它属于div，与location.hash相同

因此，链接上的click事件（通过动画将用户移动到另一个div）是不合适的，因为location.hash仅在动画完成时才会更改。

这就是问题：我怎样才能抓住jQTouch动画完成来解决问题？也许我可以用jQuery本身来做，但是怎么做？

感谢。

修改我找到了解决方案。所以，我在这里发布。

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

Answer 1

这适用于Safari和Chrome吗？对我来说它只适用于Firefox。

如何捕获jQTouch动画完成？

1 个答案: