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

您可以将参数（毫秒数）传递给show()或hide()，这将为转换设置动画。

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

Answer 2

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

jQuery动画.hide过滤结果

2 个答案: