0

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

完成此功能并单击另一张图片后，我会像上一张一样缩小尺寸，这很难解释，所以我做了一个 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/

4

1 回答 1

0

一个提示：如果多次使用 jquery 元素，请始终缓存它（例如

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

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

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

更新的演示

于 2013-01-08T17:26:13.610 回答