Question

我有以下内容：http://jsfiddle.net/JfGVE/318/

问题在于它不是一个流畅的动画。我希望它如何工作：

在显示图标之前将图标居中显示在屏幕中间。
将其淡入，当它渐渐消失时，将其调整为略大一些，同时停留在屏幕的死角。
淡出。

如何将动画修复为完全平滑并感觉好像是“脉冲”。

HTML：

<a href="#">Click Me!</a>

<i class="fa fa-heart"></i>

CSS：

.fa-heart {
    font-size: 48px;
    color: red;
    position: absolute;
    display: none;
}

jQuery的：

$(document).on("click", "a", function() {
    var center_width = $(window).width() / 2;
    var center_height = $(window).height() / 2;

    /* Set the icon to the center of the screen. */
    $('.fa-heart').css({ 'left': center_width, 'top': center_height });

    /* Fade the icon in, resize it, and fade it out. */
    $('.fa-heart').fadeIn();
    $('.fa-heart').animate({ fontSize: '60px' }, 300);
    $('.fa-heart').fadeOut();
});

Answer 1

检查出来：http://jsfiddle.net/JfGVE/336/

$(document).on("click", "a", function() {
    var center_width = $(window).width() / 2;
    var center_height = $(window).height() / 2;

    /* Set the icon to the center of the screen. */
    $('.fa-heart').css({ 'left' : center_width - 24, 'top': center_height - 24 });

    /* Fade the icon in, resize it, and fade it out. */
    $('.fa-heart').animate({ fontSize: '60px', opacity: 1, 'left' : center_width - 30, 'top': center_height - 30}, 250);
    $('.fa-heart').animate({ fontSize: '48px', opacity: 0, 'left' : center_width - 24, 'top': center_height - 24}, 250);
});

我所做的不是使用fadeIn（）和fadeOut（）而是使用animate（）来同时更改大小和不透明度。你可以改变时间，使它们像真正的心跳，但因为尺寸变化和不透明度变化都在同一个动画（）中，它们会同时发生。 animate（）中的第三个值是将图片的中心设置为页面的中心。这需要是center_height（或center_width） - 图片高度的1/2，因此图像的中心与屏幕的中心对齐。您需要偏移量，因为在普通CSS中，位置标记将图片与相对于左上角（图片的0,0）的指定值对齐。动画的时间可以根据您希望心脏快速/慢速的速度而改变。＃/ p>;

Answer 2

您可以为CSS属性设置动画，而不是使用fadeIn()和fadeOut()。为了使心脏居中，您需要：

(width/height) of the window     (width/height) of the heart
----------------------------  -  ---------------------------
              2                               2

Fiddle

上的演示

jQuery的：

$(document).on("click", "a", function() {
    var w = ($(window).width() / 2) - ($('i').width() / 2);
    var h = ($(window).height() / 2) - ($('i').width() / 2);
    $('.fa-heart').css({ 'left': w, 'top': h });
    $('.fa-heart').animate({ fontSize: '48px', opacity: '0'}, 100);
    $('.fa-heart').animate({ fontSize: '60px', opacity: '1'}, 700);
    $('.fa-heart').animate({ fontSize: '48px', opacity: '0'}, 500);
});

CSS：

.fa-heart {
    font-size: 48px;
    color: red;
    position: absolute;
    opacity: 0;
}

Answer 3

使用Julian Shapiro的velocity.js插件

，您可以获得更流畅，更有争议的动画效果

只需调整您的css，即可将opacity: 0而不是display: none添加到您的元素

.fa-heart {
    font-size: 48px;
    color: red;
    position: absolute;
 /* display: none; */
    opacity: 0;
}

然后，速度的loop选项将为您提供所需的效果

jQuery(document).ready(function ($) {
    $("body").on("click", ".click", function () {
        var center_width = $(window).width() / 2;
        var center_height = $(window).height() / 2;
        $('.fa-heart').css({
            left: center_width,
            top: center_height
        }).velocity({
            opacity: 1,
            fontSize: "60px"
        }, {
            loop: true, // animate from initial values back and forth
            duration: 400 // adjust as needed
        });
    });
});

...这样您就不需要fadeIn或fadeOut，也无需动画回原始值或链接多个animate()方法

参见 JSFIDDLE

注意您可以通过在loop选项中设置数字来设置您希望动画发生的次数，例如

loop: 1 // or twice, three times, etc (true does infinite loop)

http://jsfiddle.net/nao9k1Lx/1/

另请注意，我向click标记提供了类 <a>更具体。

Answer 4

我updated your JsFiddle，告诉我这是否是您需要的，我可以解释这些差异。

HTML

<a href="#">Click Me!</a>

<div class="anim-container">
    <i class="fa fa-heart"></i>
</div>

的javascript

$(document).on("click", "a", function() {
    var center_width = $(window).width() / 2;
    var center_height = $(window).height() / 2;

    /* Set the icon to the center of the screen. */

    /* Fade the icon in, resize it, and fade it out. */

    $('.fa-heart').fadeIn();
    $('.fa-heart').animate({ fontSize: '55px' }, {duration: 300, queue: false});
    $('.fa-heart').animate({ fontSize: '48px' }, 300);
    $('.fa-heart').fadeOut();
});

调整大小时淡入/淡出

4 个答案:

Fiddle

jQuery的：

CSS：