Question

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

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

页面顶部的div有一个wishlist类（由于某种原因我无法发布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();
});

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

我在控制台中没有出现任何错误，但屏幕上实际上没有任何错误。有人可以告诉我我的方式错误吗？

谢谢， ç

Answer 1

当您添加图像时，它已经出现在“最终”位置，因此无法进行动画处理。要解决此问题，您可以在图片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

Example JSFiddle

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

1 个答案: