我在开发网站的 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
's 中。我的问题是当用户在这样的页面上时,隐藏具有与 的 相同的哈希链接的项目id
,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);
});