Hover 3 boxes not working as expected

Question

I have 3 boxes when you hover it will show its description. My code is working fine as expected. However, I want to make my jquery code shorter so I revised on it but it won't work as expected and I don't see any difference of the code.

Here is the html part:

 <div id="opf-container">
<div class="s-box-container">
	<div class="s-box" id="cc-home-pr">
		<div class="normal" style="display: block;">
			<span><h2>xxx</h2></span>
		</div>
		<div class="hover" style="display: none;">
		<h2>xxx</h2>
		<hr class="hr-mid">
		<p>lorem epsum</a></span></p>
		<a href="#" id="btn2-lm" class="btn2">LEARN MORE</a>
		</div>
	</div>
</div>
<div class="s-box-container">
	<div class="s-box" id="cc-home-ps">
		<div class="normal" style="display: block;">
			<span><h2>xxx</h2></span>
		</div>
		<div class="hover" style="display: none;">
			<h2>xxxx</h2>
			<hr class="hr-mid">
			<p>lorem epsum</a></span></p>
			<a href="#" id="btn2-lm" class="btn2">LEARN MORE</a>
		</div>
	</div>
</div>
<div class="s-box-container">
	<div class="s-box" id="cc-home-ft">
		<div class="normal" style="display: none;">
			<span><h2>xxx</h2></span>
		</div>
		<div class="hover" style="display: block;">
			<h2>lorem epsum</h2>
			<hr class="hr-mid">
			<p>lorem epsum<span class="highlight-w"><a href="#">Become a member</a></span> of the CardsChat forum to access exclusive freerolls and online poker games &amp; tournaments</p>
			<a href="#" id="btn2-lm" class="btn2">LEARN MORE</a>
		</div>
	</div>
</div>
</div>

Here is my jquery code:

var timer1;
    $("#cc-home-pr").hover(function() {
            clearTimeout(timer1);
            $("#cc-home-pr .hover").fadeIn(300);
            $("#cc-home-pr .normal").fadeOut(300);
        }, function() {
            boxId = '#' + $(this).attr('id');
            timer1 = setTimeout(function() {
                $("#cc-home-pr .hover").fadeOut(300);
                $("#cc-home-pr .normal").fadeIn(300);
            }, 300);
    }); 


    var timer2;
    $("#cc-home-ps").hover(function() {
            clearTimeout(timer2);
            boxId = '#' + $(this).attr('id');
            $("#cc-home-ps .hover").fadeIn(300);
            $("#cc-home-ps .normal").fadeOut(300);
        }, function() {
            boxId = '#' + $(this).attr('id');
            timer2 = setTimeout(function() {
                $("#cc-home-ps .hover").fadeOut(300);
                $("#cc-home-ps .normal").fadeIn(300);
            }, 300);
    }); 

    var timer3;
    $("#cc-home-ft").hover(function() {
            clearTimeout(timer3);
            boxId = '#' + $(this).attr('id');
            $("#cc-home-ft .hover").fadeIn(300);
            $("#cc-home-ft .normal").fadeOut(300);
        }, function() {
            boxId = '#' + $(this).attr('id');
            timer3 = setTimeout(function() {
                $("#cc-home-ft .hover").fadeOut(300);
                $("#cc-home-ft .normal").fadeIn(300);
            }, 300);
    }); 

The Jquery code above is working fine. I decided to make it shorter so I revised the code like this:

var timerBox = [];
$("div.s-box-container", this).hover(function() {
        boxIndex = $(this).index();
        clearTimeout(timerBox[boxIndex]);
        boxId = '#' + $(".s-box",this).attr('id');
        $(boxId + " .hover").fadeIn(300);
        $(boxId + " .normal").fadeOut(300);
    }, function() {
        timerBox[boxIndex] = setTimeout(function() {
            $(boxId + " .hover").fadeOut(300);
            $(boxId + " .normal").fadeIn(300);
        }, 300);
}); 

However in that code when it won't work as expected when you hover a box then the other box won't restore its original state.

Answer 1

Try indexing the collection of timers by the id of the inner .s-box:

var timerBox = [];
$("div.s-box-container").hover(function() {
        var boxId = $(".s-box",this).attr('id');
        clearTimeout(timerBox[boxId]);
        $("#" + boxId + " .hover").fadeIn(300);
        $("#" + boxId + " .normal").fadeOut(300);
    }, function() {
        var boxId = $(".s-box",this).attr('id');
        timerBox[boxId] = setTimeout(function() {
            $("#" + boxId + " .hover").fadeOut(300);
            $("#" + boxId + " .normal").fadeIn(300);
        }, 300);
}); 

JSFiddle

Edit: Removed the this from the $("div.s-box-container") selector and added a fiddle for reference.