0

我已经找出了大部分代码，但是有些东西（我知道的很小）正在躲避我：

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

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

HTML 代码：

<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>

查询：

$(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();
    });
});
4

2 回答 2

1

我注意到您使用了 width 和 height 而不是 width() 和 height() 所以试一试看看是否有帮助。使用这个。

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

编辑： - - - - - - - -

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

于 2012-04-27T19:59:56.417 回答
0

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

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

您将visibilitycss 参数设置为visible然后立即隐藏该元素。

您可以简单地使用.show()and.hide()函数而无需处理.css('visibility','visible'). 该:visible属性由 jQuery 已知的其他属性暗示 -display例如。

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

于 2012-04-27T19:54:26.447 回答