Trigger two successive quick hovers to simulate a pulse effect in CSS/JQUERY

Question

I am developing a timeline css/jquery module, each time-node/checkpoint is represented by three concentric circles, when the scrolling reaches the checkpoint or when mouse hovers on it, the outer/third circle shows up by changing its background-color, on the hover event, and fades-out by changing its background color to the color of its outer div.

My question now is how can I simulate two quick mouse hovers (say seperated by 0.7 second) to make a pulse-like effect? See it in action

Here is the full code:

<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);
    }
    )
    });

});

If you want a pulse effect it would be much simpler to create an animation in CSS - something like this: http://codepen.io/olam/pen/zcqea — Rory McCrossan, Aug 18 '16 at 10:37
Why use jQuery at all? You can do it in css3. Look at this question http://stackoverflow.com/questions/4910963/how-to-create-a-pulse-effect-using-webkit-animation-outward-rings — smoksnes, Aug 18 '16 at 10:37
I edited the question and added full source code HTML/CSS/JS and a link to a live demo — medunes, Aug 18 '16 at 13:37

score 1 · Accepted Answer · answered Aug 18 '16 at 13:49

Might be a good job for Transit JS (http://ricostacruz.com/jquery.transit/) and do something like this with the scale function:

$('.circle outer-box').transition({ scale: 1.5, useTranslate3d: true }, { queue: true, duration: 200, easing: null, complete: myCallbackFunc });

function myCallbackFunc() {
$('.circle outer-box').transition({ scale: 1.0, useTranslate3d: true }, { queue: true, duration: 200, easing: null, complete: null });
}

score 0 · Answer 2 · answered Aug 18 '16 at 11:05

.hover(callback) is a shorthand for .on('hover', callback), which means that it adds an event listener to .checkpoint.

If you want to simulate a mouseover event, you can use jQuery's trigger function, which does what the name suggests - trigger an event.

In your case, this could look like this:

function triggerEffect(n) {
    if (n > 0) {
        $('.checkpoint').trigger('mouseover');
        setTimeout(function () { triggerEffect(n-1); }, 700);
    }
}

triggerEffect(2);

Trigger two successive quick hovers to simulate a pulse effect in CSS/JQUERY

2 Answers2