我正在开发一个时间轴的css/jquery模块，每个时间节点/检查点由三个同心圆表示。当滚动到检查点时或鼠标悬停在其上时，外部/第三个圆会通过改变其背景颜色显示出来，在鼠标悬停事件中，通过将其背景颜色更改为其外部div的颜色而淡出。
我的问题是如何模拟两次快速的鼠标悬停（例如相隔0.7秒），以产生类似于脉冲的效果？ 在此处查看实际效果
以下是完整的代码：
<html lang="us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- ------------------------------------ -->
<!-- SCRIPTS -->
<!-- ------------------------------------ -->
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<!-- timedulines SCRIPT -->
<script type="text/javascript" src="js/draft.js"></script>
<!-- ------------------------------------ -->
<!-- STYLESHEETS -->
<!-- ------------------------------------ -->
<!-- BOOTSTRAP 3.3.6 STYLESHEET -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<!-- timedulines STYLE-->
<link rel="stylesheet" type="text/css" href="css/draft.css" />
</head>
<body>
<div class="container-fluid" id="timedulines">
<div class="time-node" label="2011"></div>
<div class="time-node" label="2011"></div>
<div class="time-node" label="2011"></div>
<div class="time-node" label="2011"></div>
<div class="time-node" label="2011"></div>
</div>
</body>
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:100);
body
{
padding:32px;
background-color:#f2f2f2;
}
#timedulines
{
background-color:#999 ;
}
.row
{
height:600px;
text-align:center;
}
.circle
{
border-width:0px;
border-radius:50%;
}
.inner-box
{
background-color:#585858;
color:#fff;
font-family: 'Alegreya Sans SC', sans-serif;
text-align:center;
}
.inner-box .checkpoint-date
{
font-size:8px;
}
.middle-box
{
background :#9BAD01;
border: 0px #eee 1px;
-webkit-box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.65);
-moz-box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.65);
box-shadow: 0px 0px 13px 2px #353535;
}
.outer-box
{
background-color:#999;
}
.outer-box
{
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
$(document).ready(function()
{
var timeNodeCount=0;
var colorPalette= ['#FEC900','#FF6D00','#9BAD01','#C0116E','#4A6AB5','#B51A1E','#595779'];
var fontToPaddingRatio=0.55;
var innerToMiddleRatio=0.6;
var middleToOuterRatio=0.8;
var innerBoxSize=50;
/*Build the full HTML structure from the "shortened" one*/
$('.time-node').each(function(i)
{
timeNodeCount++;
$(this).prop('id','time-node-'+timeNodeCount);
$(this).append
(
'<div class="row">'+
'<div class="col-md-2 col-md-offset-5">'+
'<div class="checkpoint">'+
'<div class="circle outer-box">'+
'<div class="circle middle-box">'+
'<div class="circle inner-box">'+
'<span class="checkpoint-date">'+$(this).attr('label')+'</span>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'
);
});
$('.time-node').each(function(i)
{
$(this).find('.middle-box').css('background',colorPalette[i]);
});
var dateFontSize=parseInt($('.checkpoint-date').css('font-size'));
/*Find the adequate font-size that fits into the checkpoint-date span (5px tolerance)*/
while(parseInt($('.checkpoint-date').width())<=innerBoxSize-5)
{
$('.checkpoint-date').css('font-size',++dateFontSize);
}
/*Inner box*/
var innerBoxFontSize=$('.checkpoint-date').height();
$('.inner-box').width(innerBoxSize);
$('.inner-box').height(innerBoxSize);
$('.inner-box').each(function(i,v)
{
v.style.setProperty('padding-top',(innerBoxSize-innerBoxFontSize)/2-5,'important');
});
/*Middle box*/
var middleBoxSize=innerBoxSize/innerToMiddleRatio;
$('.middle-box').width(middleBoxSize);
$('.middle-box').height(middleBoxSize);
/*Outer Box*/
var outerBoxSize=middleBoxSize/middleToOuterRatio;
$('.outer-box').width(outerBoxSize);
$('.outer-box').height(outerBoxSize);
/*Center the circles in each others*/
$('.middle-box').each(function(i,v)
{
v.style.setProperty('padding',(middleBoxSize-innerBoxSize)/2,'important');
});
$('.outer-box').each(function(i,v)
{
v.style.setProperty('padding',(outerBoxSize-middleBoxSize)/2,'important');
});
$(window).load(function()
{
/*Center the checkpoint vertically to the row*/
$('.row').height($('.checkpoint').height()*3)
/*Center the checkpoint vertically to the row*/
$('.row').css('padding-top',$('.checkpoint').height());
});
$('.checkpoint').each(function(i,v)
{
$(this).hover
(
function()
{
$(this).find('.outer-box').css("background-color","#bbb");
},
function()
{
var hiddenBg=$('#timedulines').css('background-color');
$(this).find('.outer-box').css('background-color',hiddenBg);
}
)
});
});