JavaScript 案例之 手风琴特效（jQuery实现）
2021-02-01 00:17
阅读：584
YPE >
标签：hidden title relative script his view html ddd document
今天学习了jQuery，突发奇想自己动手做一个手风琴特效，这个特效在开发过程中最困难的就是布局，至于jQuery特效的实现还是比较简单的。
话不多说，直接上代码：
html>
* {
margin: 0;
padding: 0;
}
.container {
width: 1380px;
height: 350px;
margin: 100px auto;
overflow: hidden;
}
.wrapper {
width: 1400px;
}
.box {
width: 345px;
height: 350px;
float: left;
position: relative;
overflow: hidden;
}
.box .title {
width: 345px;
height: 350px;
background-color: #ddd;
}
.box .content {
position: absolute;
top: 0;
left: 345px;
}
">
>
">
>
">
>
">
>
// 1. 让当前的盒子，宽度变成1380px; 让其与的盒子宽度变成0;
// 2. 移出的时候让所有的盒子宽度变成345px;
$(".box").mouseover(function () {
$(this)
.stop(true)
.animate({
width: 1380
})
.siblings(".box")
.stop(true)
.animate({
width: 0
})
.end()
.children(".content")
.css({
left: 0
})
})
$(".box").mouseout(function () {
$(".box")
.stop(true)
.animate({
width: 345
})
.queue(function () {
$(this)
.children(".content")
.css({
left: 345
})
})
})
感兴趣的小伙伴可以自己动手试一下啦。有什么更好的写法欢迎评论区留言。
JavaScript 案例之 手风琴特效（jQuery实现）
标签：hidden title relative script his view html ddd document
原文地址：https://www.cnblogs.com/XH-jing/p/12812326.html
文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：JavaScript 案例之 手风琴特效（jQuery实现）
文章链接：http://soscw.com/essay/49273.html
文章标题：JavaScript 案例之 手风琴特效（jQuery实现）
文章链接：http://soscw.com/essay/49273.html
评论
亲，登录后才可以留言！