时间戳

首页 > 解决方案 > 弹出并将图像移动到另一个位置

javascript - 弹出并将图像移动到另一个位置

问题描述

我试图让一个图像在屏幕上“弹出”，然后为这个图像设置动画，就好像它进入另一个容器一样。因此，当单击链接时，图像会飞到页面上，这是我的链接：

<a href="#" data-image="/media/1008/aquaberry.jpg" class="wishlistAdd" id="1161">Click me</a>

页面顶部的 div 有一类愿望清单（由于某种原因，我无法发布 HTML！）

所以在我的点击功能中，我有：

var myImage = $(this).attr("data-image");
var myWishList = $('.wishlist');
var image = $('<img width="30px" height="30px" src="' + myImage + '"/>').css({
    "position": "fixed",
    "z-index": "999"
});

myWishList.prepend(image);
var position = myWishList.position();

image.animate({
    top: position.top,
    left: position.left
}, 500, "linear", function () {
    image.remove();
});

所以我试图让图像弹出并“飞”到页面顶部并消失。

我在控制台中没有收到任何错误，但屏幕上实际上没有发生任何事情。有人可以告诉我我的方式的错误吗？

谢谢， C

标签： javascriptjqueryhtml

解决方案

当您添加图像时，它已经出现在其“最终”位置，因此无处可动画。要解决此问题，您可以在图像 CSS 中添加bottom: 0和right: 0或。left: 0

例如：

var image = $('<img width="30px" height="30px" src="' + myImage + '"/>').css({
    "position": "fixed",
    "bottom": "0",
    "right": "30px", //width of your image
    "z-index": "999"
});

如果你想让你的图像滑到屏幕上而不是出现，你可以设置

bottom: -30px //height of your image

示例 JSFiddle

推荐阅读