3

私は、Web サイトの 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の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);              
  });
4

1 に答える 1

0

これは Safari と Chrome で動作しますか? 私にとっては、Firefoxでのみ機能します。

于 2010-11-01T22:50:18.527 に答える