使用 jQuery fadeOut() 缩放动画

Question

我搜索了一段时间，但没有找到关于这个的帖子：我正在使用jQueryfadeOut()来animate元素。

我想通过使用jQuery的fadeOut()函数淡出scale为1.75(175%)的元素。目前，这是一个常见的淡出动画，但我希望淡出动画能够横向扩展(元素膨胀)。

我用keyframes制作了一个带有 CSS 动画的示例(浅蓝色元素)。我想用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>

Answer 1

您可以使用start在淡入淡出元素之前应用 CSS：

$('.hide').click(function() {
$('.animate').fadeOut({'start':function() {$(this).css('transform','scale(1.75)') },'duration':500});
});
$('.show').click(function() {
$('.animate').fadeIn({'start':function() {$(this).css('transform','scale(1)') },'duration':500});
});

.animate {
width: 150px;
height: 150px;
background-color: lightcoral;
margin-top: 20px;
transition:0.5s all;
}

<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>