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()方法。