jQueryを使用してCSSアニメーションをトリガーする。 Fadein（）は動作していますが、bounceIn（）は動作していませんか？

Question

fadeInは他のアニメーションとは機能が異なりますか？私はfadeInにそれらのすべてを変更する場合は、このコードでのみfadeIn作品、彼らはすべての仕事：彼らができるよう

$("#mainCenterBall").click(function(){ 
    $("#ball1").fadeIn(1000);   
    $("#ball2").bounceIn(1000); 
    $("#ball3").bounceInDown(1000); 
    $("#ball4").bounceinUp(1000); 
    $("#ball5").bounceIn(1000); 
    $("#mainCenterBall").fadeOut(1000); 
}); 

Answer 1

bounceIn()のようなCSSアニメーションや関数を使用する方法はありません、bounceInDown()などは」jQueryのの一部ではありませんそのようなjQueryオブジェクトで使用する必要があります。 （fadeInは有効なjQuery関数です）

jQueryトリガでCSSアニメーションを使用するには、CSSを使用してアニメーションを定義し、次にjQueryを使用して定義クラスを切り替える必要があります。このデモでは、プロセスを示しています

$("#mainCenterBall").click (function(){ 
 
    $("#ball1").addClass ("bounceInDown"); 
 
    $("#ball2").fadeIn (1000); 
 
    $("#mainCenterBall").fadeOut (1000); 
 
}); 
 

 
$("#resetBtn > button").click (function(){ 
 
    $("div").removeAttr ("style"); 
 
    $("#ball1").removeClass ("bounceInDown"); 
 
});

/*--- CSS animation stuff ---*/ 
 
.animate2sec { 
 
    animation-duration: 2s; 
 
} 
 
@keyframes bounceInDownKF { 
 
     0% { transform: translateY(-2000px); } 
 
    40% { transform: translateY(30px); } 
 
    80% { transform: translateY(-10px); } 
 
    100% { transform: translateY(0); } 
 
} 
 
.bounceInDown { 
 
    animation-name:  bounceInDownKF; 
 
} 
 

 
/*--- Demo setup stuff ---*/ 
 
#container { display: flex; height: 180px; align-items: center; } 
 
#ball1, #ball2, #mainCenterBall { 
 
    border:    2px solid gray; 
 
    display:   inline-block; 
 
    margin:    0 1.5ex; 
 
} 
 
#ball1, #ball2 { border-radius: 35px; height: 70px; width: 70px; } 
 
#mainCenterBall { 
 
    border-radius:  65px; 
 
    height:    130px; 
 
    width:    130px; 
 
    background:   black; 
 
    color:    white; 
 
    display:   flex; 
 
    align-items:  center; 
 
    cursor:    pointer; 
 
} 
 
#ball1 { background: green;} 
 
#ball2 { background: red; display: none; } 
 
.centerElm { margin: 0 auto; } 
 
#resetBtn { width:  90%; text-align: center; } 
 
#resetBtn > button { cursor: pointer; margin: 0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="animate2sec" id="ball1"></div> 
 
    <div id="mainCenterBall"><span class="centerElm">Click me</span></div> 
 
    <div id="ball2"></div> 
 
</div> 
 
<div id="resetBtn"><button>Reset</button></div>

---

注こと：

1. jQuery has a different animation interface。
2. ありますきちんとbunch of predefined CSS@keyframes and CSS styles at Animate.css on GitHub