0

ランニングの怪我と予防に関するインタラクティブなモバイル情報ページの作成に取り組んでいます。動作するように設計されている方法は次のとおりです。

ページ上に8個のアイコンが並んでいます。ユーザーがアイコンをクリックすると、他のすべてのアイコンがフェードアウトしますが、クリックされたアイコンは画面の上部にアニメーション化されます。

ここから、そのアイコンに関連する情報テキストが表示されます (テキストは jsfiddle には表示されません。私の問題とは関係ありません)。

テキストとともに戻るボタンも表示されます。ユーザーが戻るボタンをクリックすると、テキストが消え、アイコンが元の位置にアニメーションで戻ります。

動くアイコン自体は jQuery で作成していますclone。クローンにアニメーションとスタイルが適用され、元の場所に戻ると非表示になります。

このアニメーションを作成する jQuery を実行すると、posクリックされたアイコンの元の位置を保持する値が格納されます。これは、ユーザーが「戻る」をクリックすると、正しい場所に戻るようにするためです。はとの値posを格納するオブジェクトであるため、 と を介してアクセスされます。これが実際の動作の一部です。これは私の元の位置を保存します：lefttoppos.toppos.left

$gridImg.click(function() {

    ...

    $clone = $(this).clone();

    var pos = $(this).position();

    $clone.css({
        position: 'absolute',
        left: pos.left,
        top: pos.top
});

各アイコンの HTML のスニペットを次に示します (画像は不気味なスマイリーに置き換えられています。

<div class="rice-injury-grid">

    <!-- first icon -->     
    <div data-title="rest" class="grid-img">
        <img id="rest-img"  alt="Rest" src="http://icons.iconseeker.com/png/64/sketchcons-x/smiley-3.png"/>
    </div>

    <!-- second -->
    <div data-title="blister" class="grid-img">
        <img id="blister-img" alt="Blisters" src="http://icons.iconseeker.com/png/64/sketchcons-x/smiley-3.png"/>
    </div>

    <!-- third -->    
    <div data-title="ice" class="grid-img">
        <img id="ice-img" alt="Ice" src="http://icons.iconseeker.com/png/64/sketchcons-x/smiley-3.png"/>
    </div>

    <!-- and so on... -->

私の問題は次のとおりです。このアプリの使用中、ユーザーがアイコンを選択するたびに値が無期限に保存posされるため、「戻る」ボタンを押すたびに、アイコンは以前に選択された各位置に戻ります。

posアイコンが元の位置に戻るたびに値をクリアする方法を探しています。

デモについては、 jsfiddleを参照してください。完全な効果を確認するには、少なくとも 2 つの個別のアイコン シーケンスを実行します。

4

2 に答える 2

3

のスコープをposコールバックの外に移動すると、すべて正常に動作します。

編集：フィドルを更新http://jsfiddle.net/YjWkn/3/

var pos;
$gridImg.click(function () {
    var imgId = "#" + $(this).attr('id');
    var title = $(this).data('title');
    var copy = "#" + title + "-copy";

    $gridImg.fadeOut(200);

    $clone = $(this).clone();

    pos = $(this).position();

var pos;バインディングの直前に追加varし、sets ステートメントからを削除しましたpos。

編集：

あなたが抱えている2番目の問題は、アイコンをクリックするたびに戻るボタンのクリックをバインドするためです。最初にクリックすると 1 回、2 回目は 2 回、3 回目は 3 回、というように続きます。

そこで、バインディングをクリック イベントの外に移動しました。そうすることで、「コピー」の範囲も拡大する必要がありました。

var pos;
    var copy;
    $backBtn.click(function () {
            $(copy).fadeOut(200);
            $backBtn.fadeOut(200);
            $clone.animate({
                width: '50%',
                top: pos.top,
                left: pos.left
            }, 300);

            setTimeout(function () {
                $clone.fadeOut(200);
                $gridImg.fadeIn(200);
            }, 300);

        });
    $gridImg.click(function () {
于 2013-08-20T19:32:36.880 に答える
0

pos をグローバル JS 変数にし、戻るボタン関数の最後でそれをクリアすると、完全に機能します。

更新された JSFiddle: http://jsfiddle.net/YjWkn/4/

グローバル：

var pos;
$gridImg = $('.grid-img');

設定：

pos = $(this).position();

クリア：

setTimeout(function() {
    $clone.fadeOut(200);
    $gridImg.fadeIn(200);
}, 300);
pos = '';
于 2013-08-20T19:34:58.593 に答える