这次给大家带来jQuery做出玻璃质感手风琴特效步骤详解（附代码），jQuery做出玻璃质感手风琴特效的注意事项有哪些，下面就是实战案例，一起来看一下。
效果图：
具体代码如下：
html代码：
Awesome
Words
Ettrics
Go
Ettrics
lorem ipsum dolor sit amet, consectetur adipisicing elit. officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! repellendus numquam quo, voluptate. suscipit soluta omnis quibusdam facilis, illo voluptates odit!
Inside
Ettrics
lorem ipsum dolor sit amet, consectetur adipisicing elit. officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! repellendus numquam quo, voluptate. suscipit soluta omnis quibusdam facilis, illo voluptates odit!
Here
Ettrics
lorem ipsum dolor sit amet, consectetur adipisicing elit. officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! repellendus numquam quo, voluptate. suscipit soluta omnis quibusdam facilis, illo voluptates odit!
js代码：
var Expand = function () {
var tile = $('.stripsstrip');
var tileLink = $('.stripsstrip > .stripcontent');
var tileText = tileLink.find('.stripinner-text');
var stripClose = $('.stripclose');
var expanded = false;
var open = function () {
var tile = $(this).parent();
if (!expanded) {
tile.addClass('stripsstrip--expanded');
tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.addClass('stripclose--show');
stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
expanded = true;
}
};
var close = function () {
if (expanded) {
tile.removeClass('stripsstrip--expanded');
tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.removeClass('stripclose--show');
stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)');
expanded = false;
}
};
var bindActions = function () {
tileLink.on('click', open);
stripClose.on('click', close);
};
var init = function () {
bindActions();
};
return { init: init };
}();
Expand.init();相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
