jQuery animate。隱藏過濾器結果

Question

我從來沒有做過太多的jQuery，我不確定這是否可以完成。我有以下jQuery根據他們的ID隱藏和顯示div。這個顯示/隱藏功能可以以任何方式動畫？如果是這樣，你能舉個例子嗎？

我會在這裏和小提琴中提供代碼。

的jQuery：

var $all = $('div', '#divIssueMenu'); 
var $filter1 = $('div.filter1', '#divIssueMenu'); 
var $filter2 = $('div.filter2', '#divIssueMenu'); 
var $filter3 = $('div.filter3', '#divIssueMenu'); 
var filters = { 
all: $all, 
filter1: $filter1, 
filter2: $filter2, 
filter3: $filter3 
} 
$('#filters a').click(function (e) { 
e.preventDefault(); 
var id = $(this).attr('id'); 
$all.hide(); 
filters[id].show(); 
}); 

HTML：

   <div id='filters'>Refine by: <a href='#' id='filter1'>Work</a> | <a href='#' id='filter2'>Personal</a> | <a href='#' id='filter3'>Magento</a> | <a href='http://www.mylessanigar.co.uk/blog/blog.html' id='all'>Reset</a><br> </br> 
       </div> 
       <div id="divIssueMenu"> 

        <div id="rpMenu_divMenu_0" class="filter1"><p class="blogpostinfo">Posted by Myles. 28/10/2013</p>Welcome to my blog<br> </br></div> 

        <div id="rpMenu_divMenu_1" class="filter2"><p class="blogpostinfo">Posted by Myles. 28/10/2013</p>Welcome to my blog<br> </br></div> 

        <div id="rpMenu_divMenu_3" class="filter3"><p class="blogpostinfo">Posted by Myles. 28/10/2013</p>Welcome to my blog<br> </br> </div> 

        <div id="rpMenu_divMenu_3" class="filter3"><p class="blogpostinfo">Posted by Myles. 28/10/2013</p>Welcome to my blog<br> </br> </div> 

        <div id="rpMenu_divMenu_3" class="filter3"><p class="blogpostinfo">Posted by Myles. 28/10/2013</p>Welcome to my blog</div> 

這可以看作完全在這裏工作：http://jsfiddle.net/5g3zV/

所有我需要做的是讓它看起來更好！

由於

Answer 1

fiddle Demo

var $all = $('#divIssueMenu') 
$('#filters a').click(function (e) { 
    e.preventDefault(); 
    var id = this.id; 
    if (id === 'all') { 
     $all.find('div').show(); 
    } else { 
     $all.find('div').hide(); 
     $all.find('.' + id).show(); 
    } 
}); 

---

.show(duration)

.hide(duration)

持續時間（默認值：400）

---

.animate()

var $all = $('#divIssueMenu') 
$('#filters a').click(function (e) { 
    e.preventDefault(); 
    var id = this.id; 
    if (id === 'all') { 
     $all.find('div').show(); 
    } else { 
     $all.find('div').hide(); 
     $all.find('.' + id).stop(true, true).animate({ 
      height: 'toggle' 
     }, 800); 
    } 
}); 

fiddle Demo with animation

Answer 2

可以傳遞的參數（毫秒數）show()或hide()這將過渡動畫效果。

如果您想進一步控制，請查看animate()方法。