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

这不是如何使用CSS动画和bounceIn()，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>

请注意：

jQuery has a different animation interface。
有一个整洁的bunch of predefined CSS @keyframes and CSS styles at Animate.css on GitHub

使用jQuery触发CSS动画; Fadein（）正在工作，但是bounceIn（）不是吗？

1 个答案: