.animate() 和缩放函数

Question

我需要创建一个取决于多个因素的画廊，并执行一系列缩放以适合的图像。无论如何，我需要当您单击“触发”按钮时，主容器几乎占据了视口的整个可见区域，并且它包含的图像比例相当可观。

我正在关注这个reference

我不能做的行为是放大图像。当您单击其中一个时，拇指消失并且主图像被缩放。我的代码如下：

根据我读到的一篇关于 jQuery .animate() 方法的小文章，我使用放大图像的功能。

function resize(){ 
gallery = $('#items'); 
galleryH = gallery.height(); 

$('#items img').each(function() { 
    var height = $(this).height(); 
    $(this).stop(true).animate({'height':galleryH},1000); 
    }); 
} 
resize();

根据这种方法“动画”只有高度，宽度是自动的，从而保持比例。这似乎工作正常。正如你在上面看到的，它是根据容器的高度缩放的。

嗯，这在页面加载和缩放窗口大小时效果很好。然后我需要的是，当您单击容器或其他按钮/发射器填充窗口时，类似于所附示例中发生的情况，并且图像会根据此大小进行缩放。就像在此样品中。为此，请使用以下代码：

function changeView(){ 

    if(gallery.hasClass("largeExp")){ 
        gallery.removeClass("largeExp"); 
            gallery.stop(true).animate({'height':'200px'},500); 
            console.log("Normal Mode"); 
        } 
        else{ 
            gallery.addClass("largeExp"); 
            gallery.stop(true).animate({'height':'650px'},500); 
            console.log("Expand Mode"); 
        } 

        console.log("Now would launch resize()"); 
        resize(); 
} 

$('#items').click(function() { 
    changeView(); 
});

好吧，实际情况是画廊（容器）实际上“动画”到了这些措施，但其中没有包含图像。 resize() 方法仅从第二次单击开始运行。在第一次单击时非常好并且可以根据需要进行缩放，在第二次单击中，图像被缩放到大尺寸，而画廊（容器）移动到小模式或正常模式。从这里开始，容器和图像以相反的方式缩放。当容器处于正常模式时，图像处于展开状态等。工作使画廊（容器）和图像永远不适合。我需要在容器展开时图像也展开。

我没有真正的 JS 经验，我确定我做错了什么。所以我希望你能帮助我，我为此浪费了很多时间！

非常感谢您！

Answer 1

我现在在我的 iPad 上，所以我无法真正复制代码，但我现在只能说这似乎是一个时间问题。发生的情况是您单击按钮来缩放画廊，调整大小功能实际上是在启动需要 500 毫秒的缩放画廊的动画的同时调用的。您需要在 resize 函数上设置大于 500 毫秒的时间，或者在 animate 方法中调用该函数。基本上你必须在画廊缩放完成后调用resize函数。

setTimeout(function() { resize(); }, 510);