如何捕捉 jQTouch 动画完成情况?
我使用 jQTouch(及其内置动画)来开发 iPhone 版本的网站。所以,我有一个静态菜单:
<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
中。我的问题是隐藏与它所属的 div
的 id
相同的哈希链接的项目,并且与 location.hash
相同code>,当用户位于这样的页面上时。
因此,链接上的 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);
});
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);
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这适用于 Safari 和 Chrome 吗?
对我来说它只适用于 Firefox。
Does this work on Safari and Chrome?
For me it only works on Firefox.