クリック時にキーフレームを再開させる

Question

キーフレームを使用して浮かせる気泡がありますが、クリックしたときに消えたいボタンであり、は0％で自動的に再開します。 これを行うにはonmousedownとonmouseupを呼び出していますが、動作していないようです。何か案は？

$(document).ready() { 
 
    function Bubbles() { 
 
    $(".bubble_cluster_one").css("opacity", "0"); 
 

 
    } 
 

 
    function Bubbles2() { 
 
    $("bubble_cluster_one").css("top": "400px", "opacity": "1"); 
 

 
    } 
 
}

.bubble_cluster_one { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-animation: bubble_cluster_one 8s infinite; 
 
    left: 150px; 
 
    z-index: +1; 
 
} 
 
.bubble_cluster_one input { 
 
    width: 40px; 
 
    height: 60px; 
 
} 
 
@-webkit-keyframes bubble_cluster_one { 
 
    0% { 
 
    top: 400px; 
 
    } 
 
    100% { 
 
    top: -70px; 
 
    } 
 
}

<div class="bubble_cluster_one"> 
 
    <input type="image" src="bubbles_1.png" alt="button" onmousedown="Bubbles()" onmouseup="Bubbles2()"> 
 
</div>

Answer 1

あなたは壊れ、うまくいかないパターンを持っています。

まず、正しいラッパーは次のようになります。

$(document).ready(function() { 
    ... 
}); 

//or 

$(function() { 
    ... 
}); 

しかし、あなたは、その後、Bubbles()とBubbles2()がHTMLとして添付イベントハンドラから到達不能であることを行う場合には、「属性」。不透明度をいじることなく、直接、そのオフスクリーンにバブルを送る、あるいは

$(function() { 
    function Bubbles() { 
     $(this).css("opacity", "0"); 
    } 
    function Bubbles2() { 
     $(this).css("top": "400px", "opacity": "1"); 
    } 

    $(".bubble_cluster_one input") 
     .on('mousedown', Bubbles) 
     .on('mouseup', Bubbles2); 
}); 

：

$(document).ready(function() { 
    $(".bubble_cluster_one input").on('mousedown', function() { 
     $(this).css({ "top": "400px" }); 
    }); 
}); 

注：

したがって、JavaScriptでハンドラを取り付ける両方の実施例は、異なりますイベントハンドラは入力要素ではなくクラスタラッパーに接続されています。必要な効果を得るには、そのアスペクトを調整する必要があります。

Answer 2

問題のカップルは疑問で提供されていたスニペットにありました：

• jQueryのライブラリが含まれていませんでした。ローマー-1888の答えに言及し、イベントハンドラを直接JSを介して付着されなければならないよう
• $(document).readyラッパーが間違って書かれていた（それは記述する必要があります。これは、ベストプラクティスは、インライン属性を使用するのではなく、実際にある。他の

2は、以下のものよりあなたがCSSアニメーションに関する留意する必要があるものです：

• 無限のアニメーションが開始したら、それはアニメーションが要素から削除されるまで実行され続けそう、でもそれかかわらず。 opacity: 0を使用して非表示にした場合、アニメーションはバックグラウンドで実行しています。
• CSSアニメーションを再開するには、要素上のアニメーションを削除し、遅延の後に再び追加するしかありません。

• 上記の要素が元の位置に戻り、チャンスはあなたのマウスポインタが要素の上にもはやであることが非常に高いです（mousedownに）アニメーションが削除されたときのでmousedownとmouseupイベントを行うことはできません。つまり、mouseupイベントは、マウスがまだ要素の上にあるときにのみ発生するため、発生しません。 jQuery websiteから

  ：マウスポインタが要素上で、マウスボタンが離されたときのmouseupイベントは、要素に送信されます。

• だから、解決策は、次の操作を実行することです：

  • 要素にこの余分なクラスを追加し、一人でanimationプロパティの特定のクラスを使用します。これは必須ではありませんが、クラスメソッドを追加/削除するだけで、アニメーションの追加や削除が簡単になります。
  • 最初のアニメーションクラスを削除し、要素上clickイベントを使用し、要素を隠し、（setTimeoutを使用して）わずかな遅延の後にバック要素にアニメーションクラスを追加し、バック1からopacityを設定する0にopacityを設定。

$(document).ready(function() { 
 
    $(".bubble_cluster_one input").on('click', function() { 
 
    $(".bubble_cluster_one").removeClass("animation"); 
 
    $(".bubble_cluster_one").css("opacity", "0"); 
 
    setTimeout(
 
     function() { 
 
     $(".bubble_cluster_one").addClass("animation"); 
 
     $(".bubble_cluster_one").css("opacity", "1"); 
 
     }, 100); 
 
    }); 
 
});

.bubble_cluster_one { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    left: 150px; 
 
    z-index: 1; 
 
} 
 
.animation { 
 
    animation: bubble_cluster_one 8s infinite; 
 
} 
 
.bubble_cluster_one input { 
 
    width: 40px; 
 
    height: 60px; 
 
} 
 
@keyframes bubble_cluster_one { 
 
    0% { 
 
    top: 400px; 
 
    } 
 
    100% { 
 
    top: -70px; 
 
    } 
 
}

<!-- prefix free library is only to avoid vendor prefixes --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bubble_cluster_one animation"> 
 
    <input type="image" src="bubbles_1.png" alt="button"> 
 
</div>

---

top: 400pxをmouseupに追加するだけで、CSSアニメーションが実行されているときにアニメーションが使用されているプロパティを完全に制御するため、機能しません。アニメーションを無効にできるルールは、!importantのルールだけです。可能であれば、!importantを使用するのは悪い習慣ですので、アニメーションを再起動する方法はお勧めしません。

投稿者Animations Spec：CSSアニメーションは、計算されたプロパティ値に影響します。アニメーションの実行中、プロパティの計算値はアニメーションによって制御されます。これは、通常のスタイリングシステムで指定された値をオーバーライドします。アニメーションはすべての通常のルールよりも優先されますが、重要なルールによって上書きされます。