對不起,有趣的標題第一。爲什麼addClass方法首先在Jquery中運行?
我正在嘗試使連鎖效應。
我想要效果開始,我點擊我的div,但是當我點擊首先發生的連鎖效應。
我在做什麼錯了?使用JavaScript和jQuery
$(function() {
$(".box").click(function(event) {
var x = event.clientX;
var y = event.clientY;
$(".ripple").css({
"top": y - 5,
"left": x - 5
});
$(".ripple").addClass('active');
setTimeout(function() {
$(".ripple").removeClass('active');
}, 500);
});
});
.box {
width: 200px;
height: 200px;
background: #434A54;
position: relative;
overflow: hidden;
}
.ripple {
width: 10px;
height: 10px;
border-radius: 100%;
transform: scale(1);
background: rgba(255, 255, 255, 1);
position: absolute;
opacity: 1;
}
.active {
transform: scale(60);
opacity: 0;
transition: all 0.6s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="ripple"></div>
</div>
所以,現在的方式來使我在哪裏點擊使用addClass漣漪效應? – Norx
看看我發佈的示例鏈接。您可能需要刪除白色背景顏色,並減少當前設置爲1000毫秒的動畫持續時間。 – DinoMyte
我也喜歡你,我知道但它不是解決方案,也不能流暢運行。 – Norx