这篇博客将介绍一个简单的jquery动画
js完成了DOM的状态切换,通过鼠标进入事件记录了当前的激活列,并且清除了之前的激活列。
css定义了不同状态的形态,以及形态切换的姿势。
接下来将会涉及到:
- CSS
- Jquery
作品目标:CSS浮动四列布局的基础上为每一列增加鼠标进入事件,从而实现鼠标进入每一列时该列被激活,改变CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="y-row">
<ul class="card-area">
<li class="card-item active"></li>
<li class="card-item"></li>
<li class="card-item"></li>
<li class="card-item"></li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>
//鼠标移入列激活,其他列默认
$(document).on('mouseenter','.card-item',function(e){
var $this = $(e.target),$active;
$this.is('li') || ($this = $this.closest('li'));
$active = $this.siblings(".active");
$active.toggleClass('active');
$this.addClass('active');
});
</script>
</body>
</html>
.y-row {
min-width: 1000px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
zoom: 1;
}
article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul {
margin: 0;
padding: 0;
}
.y-row * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.card-area{
margin: 82px auto 0 auto;
width: 1180px;
}
.card-item{
z-index: 10;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.12s;
position: relative;
float: left;
width: 22%;
height: 548px;
background-color: transparent;
border: 1px solid #DBDBDD;
}
.card-item.active{
z-index: 100;
border: 1px solid #00c1de;
box-shadow: 0 0 20px rgba(0, 198, 226, 0.5);
width: 34%;
height: 563px;
}
需要注意的是,在这个动画示例中css和js的职责分工。
js完成了DOM的状态切换,通过鼠标进入事件记录了当前的激活列,并且清除了之前的激活列。
css定义了不同状态的形态,以及形态切换的姿势。
之所以要js掺和进来,是因为这个动画里面涉及到了状态信息,已经不是单个DOM元素的变化。
所以说,核心的需要理解记忆且灵活运用的代码是。
$(document).on('mouseenter','.card-item',function(e){
var $this = $(e.target),$active;
$this.is('li') || ($this = $this.closest('li'));
$active = $this.siblings(".active");
$active.toggleClass('active');
$this.addClass('active');
});
.card-item{
z-index: 10;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.12s;
position: relative;
float: left;
width: 22%;
height: 548px;
background-color: transparent;
border: 1px solid #DBDBDD;
}
.card-item.active{
z-index: 100;
border: 1px solid #00c1de;
box-shadow: 0 0 20px rgba(0, 198, 226, 0.5);
width: 34%;
height: 563px;
}