动画背景颜色,脉冲效果
Animating background color, pulse effect
我制作了一个脚本,用于在将鼠标悬停在其中的 a 元素上后为我的菜单 li 元素设置动画。
一切正常,但我想要别的东西。我希望效果不会消失,而是只要鼠标悬停在 a 元素上就会一直存在。
使用什么功能?
到目前为止的脚本:
jQuery(document).ready(function($){
$(".main-navigation a").mouseover(function() {
$(this).parent().animate({
backgroundColor: "green"
}, "normal"),
$(this).parent().animate({
backgroundColor: "transparent"
})
.mouseleave(function() {
$(this).parent().animate({
backgroundColor: "transparent"
}, "normal")
});
});
});
您可以使用 CSS 的 @keyframes
而不使用 jQuery。
ul {
position: relative;
width: 250px;
height: 50px;
padding: 0;
margin: 0;
list-style: none;
}
li a {
width: 100%;
height: 100%;
line-height: 50px;
text-align: center;
}
li a:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
display: block;
z-index: -1;
}
li {
position: relative;
height: 50px;
width: 250px;
text-align: center;
border: 1px solid black;
}
a:hover:before {
-webkit-animation: pulse 0.8s ease-in-out infinite alternate;
animation: pulse 0.8s ease-in-out infinite alternate;
}
@-webkit-keyframes pulse {
0% {
background: transparent;
}
50% {
background: green;
}
100% {
background: transparent;
}
}
@keyframes pulse {
0% {
background: transparent;
}
50% {
background: green;
}
100% {
background: transparent;
}
}
<nav class="main-navigation">
<ul>
<li><a>Menu-item#1</a></li>
<li><a>Menu-item#2</a></li>
<li><a>Menu-item#3</a></li>
<li><a>Menu-item#4</a></li>
</ul>
</nav>
这是给你哥们的完整 jQuery 解决方案,希望对你有所帮助:=)
jQuery(document).ready(function($){
var intervalID;
$(".main-navigation ul li a").hover(function(){
var that = $(this);
var opacityToggle = function(){
if(!that.children('.green').length){
$(that).prepend('<span class="green"></span>');
$('.green').animate({opacity:1},500);
}
else if(that.children('.green').length){
$('.green').animate({opacity:0},500,function(){
$('.green').remove();
});
}
}
intervalID = setInterval(opacityToggle, 500);
},function(){
$('.green').remove();
clearInterval(intervalID);
intervalID = 0;
});
});
ul{
list-style:none;
}
li a {
height:100%;
text-align:center;
position:relative;
width:inherit;
display:block;
}
li {
height: 50px;
width: 250px;
text-align: center;
border: 1px solid black;
}
.green{
position:absolute;
background-color:green;
width:100%;
height:100%;
display:block;
opacity:0;
z-index:-1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-navigation">
<ul>
<li><a>Menu-item#1</a></li>
<li><a>Menu-item#2</a></li>
<li><a>Menu-item#3</a></li>
<li><a>Menu-item#4</a></li>
</ul>
</nav>
我制作了一个脚本,用于在将鼠标悬停在其中的 a 元素上后为我的菜单 li 元素设置动画。
一切正常,但我想要别的东西。我希望效果不会消失,而是只要鼠标悬停在 a 元素上就会一直存在。
使用什么功能?
到目前为止的脚本:
jQuery(document).ready(function($){
$(".main-navigation a").mouseover(function() {
$(this).parent().animate({
backgroundColor: "green"
}, "normal"),
$(this).parent().animate({
backgroundColor: "transparent"
})
.mouseleave(function() {
$(this).parent().animate({
backgroundColor: "transparent"
}, "normal")
});
});
});
您可以使用 CSS 的 @keyframes
而不使用 jQuery。
ul {
position: relative;
width: 250px;
height: 50px;
padding: 0;
margin: 0;
list-style: none;
}
li a {
width: 100%;
height: 100%;
line-height: 50px;
text-align: center;
}
li a:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
display: block;
z-index: -1;
}
li {
position: relative;
height: 50px;
width: 250px;
text-align: center;
border: 1px solid black;
}
a:hover:before {
-webkit-animation: pulse 0.8s ease-in-out infinite alternate;
animation: pulse 0.8s ease-in-out infinite alternate;
}
@-webkit-keyframes pulse {
0% {
background: transparent;
}
50% {
background: green;
}
100% {
background: transparent;
}
}
@keyframes pulse {
0% {
background: transparent;
}
50% {
background: green;
}
100% {
background: transparent;
}
}
<nav class="main-navigation">
<ul>
<li><a>Menu-item#1</a></li>
<li><a>Menu-item#2</a></li>
<li><a>Menu-item#3</a></li>
<li><a>Menu-item#4</a></li>
</ul>
</nav>
这是给你哥们的完整 jQuery 解决方案,希望对你有所帮助:=)
jQuery(document).ready(function($){
var intervalID;
$(".main-navigation ul li a").hover(function(){
var that = $(this);
var opacityToggle = function(){
if(!that.children('.green').length){
$(that).prepend('<span class="green"></span>');
$('.green').animate({opacity:1},500);
}
else if(that.children('.green').length){
$('.green').animate({opacity:0},500,function(){
$('.green').remove();
});
}
}
intervalID = setInterval(opacityToggle, 500);
},function(){
$('.green').remove();
clearInterval(intervalID);
intervalID = 0;
});
});
ul{
list-style:none;
}
li a {
height:100%;
text-align:center;
position:relative;
width:inherit;
display:block;
}
li {
height: 50px;
width: 250px;
text-align: center;
border: 1px solid black;
}
.green{
position:absolute;
background-color:green;
width:100%;
height:100%;
display:block;
opacity:0;
z-index:-1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-navigation">
<ul>
<li><a>Menu-item#1</a></li>
<li><a>Menu-item#2</a></li>
<li><a>Menu-item#3</a></li>
<li><a>Menu-item#4</a></li>
</ul>
</nav>