Question

我已经泄露了大部分代码，但有些东西（我知道的很少）让我不知所措：

我正在将较大的图像加载到div中并调整该div的大小以匹配新的较大图像尺寸。 div在缩略图上点亮，点击时淡出，在点击新缩略图时更改为新调整大小的内容（我稍后会添加前进和后退按钮。）

一切正常，除了div调整大小时的动画。我在代码中看不到错误。有什么帮助吗？

HTML code：

<div id="wrapper">
<div id="small"><img src="images/small/001.jpg" width="100" height="125"><img     src="images/small/002.jpg" width="100" height="125"></div>
<div id="large"><img src="" /></div>

JQuery的：

$(document).ready(function(){
    $('#small img').click(function() {
        var image = $(this);
        var src = image.attr('src');
        src = src.split('/');
        var filename = src[src.length-1];
        var image_folder = 'images/large/';
        var large_image = $('#large img');
        large_image.attr('src', image_folder + filename);
        new_height = $('#large img').height+"px";
        new_width = $('#large img').width+"px";
        $('#large').html('');
        $('#large').append(large_image);
        if( $('#large').is(":visible") ) {
            $('#large').animate({
                "height":new_height,
                "width":new_width
            }, {duration: 1000})
        } else {
            $('#large').css('visibility','visible').hide();
            $('#large').fadeIn(1000);
        }   
    });
    $('#large').click(function(){
        $('#large').fadeOut(1000);
        //$('#large').hide();
    });
});

Answer 1

我注意到你使用了宽度和高度而不是width（）和height（），所以给它一个镜头，看看是否有帮助。使用这个。

new_height = $('#large img').height()+"px";
new_width = $('#large img').width()+"px";

编辑：----------------

我不确定你尝试应用会产生什么样的影响，但我已经使用了jQuery UI并想出了这个http://jsfiddle.net/v3YkY/。如果您决定使用它，请不要忘记将jQuery UI CSS添加到您的页面。

Answer 2

不确定这是否是你的问题......但这行代码与自身相矛盾 -

$('#large').css('visibility','visible').hide();

您正在将visibility css参数设置为visible，然后立即隐藏该元素。

您只需使用.show()和.hide()功能，而无需处理.css('visibility','visible')。 :visible属性由jQuery已知的其他属性暗示 - 例如display。

调用.animate()函数后，您还缺少分号。现在可能不是问题，但是当你开始在不同的浏览器上测试它时肯定会出现问题。 _{不提任何名字......}

加载新图像后，JQuery动画div

2 个答案: