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();

根据这种方法“动画化”仅高度，宽度自动由此保持比例。这似乎工作正常。如上所示，根据容器的高度进行缩放。

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

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方法内的函数。基本上你必须在画廊重新缩放完成后调用resize函数。

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

.animate（）和缩放功能

1 个答案: