Edit in JSFiddle

var steps = [
             {action:"moveto", target:"#panel1"},
             {action:"click", target:"#panel1"},
             
             {action:"moveto", target:"#panel2"},
             {action:"click", target:"#panel2"},
             
             {action:"moveto", target:"#panel3"},
             {action:"click", target:"#panel3"}
            ];

$(".panel").on("click", function(event){
	$("#" + event.target.id ).html("It worked!");
});

var curIndex = 0;

function playSteps(){
	var target = steps[curIndex].target;
  var action = steps[curIndex].action;
  
  if (action == "moveto"){
        var dest = $(target).offset();

        $(".cursor").animate(
          //CSS properties
          {
            left: dest.left + $(target).width()/2,
            top: dest.top + $(target).height()/2
          }

          //Duration
          ,2000

          //Done function
          , function(){
             curIndex++;
             	if (curIndex < steps.length){
  							window.setTimeout(1000, playSteps());
  						}
          }

        );
  }else if (action == "click"){
  		$(target).click();
      if (curIndex < steps.length){
      			curIndex++;
  					window.setTimeout(1000, playSteps());
  		}
  }
}

playSteps();

<div id="panel1" class="panel"></div>
<div id="panel2" class="panel"></div>
<div id="panel3" class="panel"></div>
<div class="cursor"></div>
.panel{
  height:100px;
  width:100px;
  background-color: lightgrey;
  border-right: solid 1px darkgrey;
  border-bottom: solid 1px darkgrey;
  padding:5px;
}
.cursor{
  position:absolute;
  height:48px;
  width:48px;
  top: 45%;
  left:45%;
  cursor: pointer;
  background-image: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/48/cursor.png');
}
.hide{
  display:none;
}