我搜索了一段时间,但没有找到相关的帖子:我正在使用jQuery
的fadeOut()
来animate
一个元素。
我想要通过使用jQuery的fadeOut()
函数将元素的scale
设置为1.75
(175%)来淡出。目前它是一个普通的渐隐动画,但我希望淡出动画能够按比例缩放(元素膨胀)。
我用keyframes
制作了一个示例(浅蓝色的元素)。我想用fadeOut()
解决这个动画(也许你需要向下滚动片段以查看示例),这可能吗?我希望这已经足够清楚了。
$('.hide').click(function() {
$('.animate').fadeOut(500);
});
$('.show').click(function() {
$('.animate').fadeIn(500);
});
.animate {
width: 150px;
height: 150px;
background-color: lightcoral;
margin-top: 20px;
}
.animate--css {
background-color: lightblue;
}
.animate--css {
width: 150px;
height: 150px;
background-color: lightblue;
margin-top: 20px;
animation: zoomOut 1s infinite;
}
@keyframes zoomOut {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.75);
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hide">Fade out</button>
<button class="show">Fade in</button>
<div class="animate"></div>
<div class="animate--css"></div>