Question

我试图在我的网站上写一个复杂的（对我而言）功能。我有3行，每行包含一个图像。在悬停时我希望这个图像背景位置改变，就是这样。当用户然后单击此图像时，我希望父div在高度上展开，并且图像在高度上展开以及更改其背景位置。

此功能完成后你点击另一张图片，Id就像上一张图片一样缩小尺寸，这很难解释所以我做了一个jsfiddle演示，我希望能给你一个想法。

另外作为jqwuery的新手我有点担心我的功能看起来臃肿，这是不好的做法还是看起来好吗？

// On work showcase click, expand area to show information
$('.work-showcase').click(function(){
    if ( !$(this).hasClass('active') ){
        $(this).addClass('active');
        $('.work-showcase').animate({height:'135px'}, 500);
        $(this).find('ul li').animate({height:'350px'}, 500);
        $(this).find('ul li').css({
            'background-position':'bottom left',
            'background-size' : 'auto auto'
        });         
        $(this).find('ul li img').animate({height:'350px'}, 500);
        $(this).animate({height:'400px'}, 500,function() {  
            $("html, body").animate({ scrollTop: $(this).offset().top });  
        });
    } else { return false;};
});

演示

http://jsfiddle.net/mx4HJ/2/

Answer 1

一个提示：如果jquery元素被多次使用（例如

），则总是缓存它

var el = $(this), li = el.find('ul li');

对于另一个问题，只需编辑此行，即添加active类：

$(this).addClass('active').siblings().removeClass('active');

Updated demo

尝试编写一个显示内容并隐藏其余内容的jQuery函数

1 个答案: