Question

在网站上，我有一份提到某件事的新闻文章清单。我想要能够按下文章，当它们出现时，图像源将切换到实际文章的图像源，并且图像将增长到任意大小。再次单击图像时，它应该恢复正常。我还希望它能够将自己设置为绝对定位，或者在它成长时不会将元素推出的方式。

我想我的第一个问题是，是否已有代码片段或易于实现此类似的东西？我找不到一个。

其次，我正在制作自己的，无论出于什么原因，当页面加载时，每个图像都会消失，而不会被按下任何东西。到目前为止，这是我的代码......

$(".newsCover").toggle(function () {

$(this).animate({
    width: "auto",
    height: "1000px"
}, 1500);

}, function () {
    $(this).animate({
        width: "auto",
        height: "300px"
    }, 1500);

});

谁能告诉我它有什么问题以及如何解决？我感觉它只是一些非常愚蠢的东西...

非常感谢！

Answer 1

.animate（）方法允许我们在任何方面创建动画效果   数字CSS属性。

除非如下所述，否则应将所有动画属性设置为单个数值。

http://api.jquery.com/animate/

但是，您可以通过将自动高度/宽度确定为硬编号来破解它：

JavaScript jQuery Animate to Auto Height

Answer 2

您使用的切换功能在1.8中已弃用，在1.9中已删除，请参见此处：http://api.jquery.com/toggle-event/在v 1.9+中，切换功能现在只是隐藏了该元素。

没有参数，.toggle（）方法只是切换可见性元素

可以在此处找到可以传递给新切换功能的参数：http://api.jquery.com/toggle/使用新的切换功能，您无法在其中运行.animate()功能。要实现您尝试做的事情，您可以执行以下操作：

$(".newsCover").click(function() {
    if($(this).height() > 300) {
        $(this).animate({
             width: "auto",
             height: "1000px"
        }, 1500);
    }
    else {
        $(this).animate({
            width: "auto",
            height: "300px"
        }, 1500);
    }
});

按下并切换使图像变得更大

2 个答案: