試圖編寫一個顯示內容並隱藏其餘內容的jQuery函數

我試圖在我的網站上編寫一個複雜的（對我來說）函數。我有3行，每行都包含一個圖像。懸停時，我希望這個圖像的背景位置改變，就是這樣。當用戶點擊這個圖像時，我想讓父div在高度上展開，圖像在高度上展開並改變背景位置。試圖編寫一個顯示內容並隱藏其餘內容的jQuery函數

這個功能完成後，你點擊另一個圖像，像上一個縮小到一個大小，這很難解釋，所以我做了一個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/

來源

2013-01-08 Liam

你可以共享的jsfiddle？ :-) – tborychowski

你的演示似乎工作正常（正如你所描述的），我錯過了什麼？ – tborychowski

如果你點擊一個圖像@tborychowski展開功能的作品，然後如果你點擊另一個它的作品，但如果你嘗試點擊一個之前不再打開，我明白這是因爲我添加了活躍的類，但我不確定如何去除它，或者最好的方式，fi是有道理的？ – Liam

一個建議：永遠緩存jQuery的元素，如果它使用一次以上（例如

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

和其他問題，只需編輯您添加的這條線active class：

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

Updated demo

來源

2013-01-08 17:26:13 tborychowski

@mplungjan這是對這個問題的回答：「這是不好的做法，還是它看起來好嗎？」 – tborychowski

Thakns @tborychowski，看看這個:) – Liam

試圖編寫一個顯示內容並隱藏其餘內容的jQuery函數

回答

相關問題