.animate() 和缩放函数

Question

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

我按照这个参考

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

我用来放大图像的函数是基于我读到的有关 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 毫秒。您需要在调整大小函数上设置大于 500 毫秒的时间，或者在 animate 方法内调用该函数。基本上，您必须在图库重新缩放完成后调用调整大小函数。

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