使用 jQuery fadeOut() 缩放动画答案

【问题标题】：Scale animation using jQuery fadeOut()使用 jQuery fadeOut() 缩放动画
【发布时间】：2018-07-10 23:30:05
【问题描述】：

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

我想使用 jQuery 的 fadeOut() 函数淡出 scale 或 1.75 (175%) 的元素。目前它是一个常见的淡出动画，但我希望淡出动画可以扩大（元素膨胀）。

我使用keyframes 制作了一个带有 CSS 动画的示例（浅蓝色元素）。我想用fadeOut() 解决动画（也许你必须向下滚动sn-p 才能看到示例），这可能吗？我希望这已经足够清楚了。

$('.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>

【问题讨论】：

标签： javascript jquery css animation fadeout

【解决方案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>

【讨论】：