Javascript 调整大小时淡入/淡出

我有以下资料：

问题是它不是一个平滑的动画。我希望它如何工作：

在显示图标之前，将其居中放置在屏幕中间

淡入，当淡入时，将其调整为稍大的尺寸，同时保持在屏幕的中间位置

淡出它

我如何修复动画，使其完全平滑，并使其感觉像一个“脉冲”

HTML:

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();
});

我已经，告诉我，如果这是你需要的，我可以解释不同之处

html

看看这个：

---

我所做的不是使用fadeIn（）和fadeOut（），而是使用animate（）同时更改大小和不透明度。您可以更改时间，使其类似于真实的心跳，但由于大小更改和不透明度更改都在同一动画中（），因此它们将同时发生。animate（）中的第三个值是将图片中心设置为页面中心。这需要是图片高度的中心高度（或中心宽度）-1/2，以便图像中心与屏幕中心对齐。您需要偏移量，因为在普通CSS中，位置标记将图片与指定的值相对左上角（图片的0,0）对齐。动画的时间可以根据您希望心脏“跳动”的速度/速度进行更改。

您可以设置CSS属性的动画，而不是使用

fadeIn（）

和

fadeOut（）

。为了使心脏居中，你需要：

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

演示 jQuery： CSS:

---

使用朱利安·夏皮罗的插件，您可以获得平滑且（有争议的）更快的动画

只需调整css，为元素提供

不透明度：0

，而不是

显示：无

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

然后velocity的

循环

选项将为您提供所需的效果

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

方法

请参见

注意您可以通过在

循环

选项中设置数字来设置希望动画发生的次数，如

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

---

另外请注意，我在

标签上加了一个类

单击

，以便更具体一些。

您打算支持哪些浏览器？我认为尽可能多的浏览器始终是关键。不，不是这样，支持所有可能的浏览器会让您在所能做的事情和所需的工作量上受到很大限制。好的，这很有效。不过，它仍然存在一个问题。当图标的位置保持在屏幕的死点时，如何调整图标的大小？请查看新图标。它将图片设置为中心-图像大小的1/2，因此图片将设置在相对于图标中心的屏幕中心，而不是左上角。作为补充说明，我的回答显示心脏在垂直和水平方向上完全居中

$(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);
});

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

$(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);
});

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

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

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
        });
    });
});

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