$(document).ready(function(){
$("a").mouseover(function(){
var currentId = $(this).attr('id')+"S";
$(".stay:visible").hide("explode",[],200);
$("#" + currentId).show("bounce");
});
});
.stay {
display:none;
}
<body>
<div id="parent">
<a id="aaa"></a>
<a id="bbb"></a>
<a id="ccc"></a>
<div id="holder">
<div class="stay" style="display:inline"></div><!--Starting Div, leaving on first mouseover-->
<div class="stay" id="aaaS"></div>
<div class="stay" id="bbbS"></div>
<div class="stay" id="cccS"></div>
</div>
</div>
</body>
I have created a setup with anchors and corresponding div elements for each one, all sharing the "stay" class. Initially, the divs are hidden, but I want them to display in a holder div when their corresponding anchor is moused over. When I previously scripted this individually, quick hovering caused all the divs to stack down the page. I tried using .stop() and .clearqueue() without success, so now I am attempting a more encompassing approach. The problem I am facing is that the script fails to identify the correct anchor element to extract the ID from. As a newcomer to this, any assistance would be greatly appreciated. Edit - I have managed to select the divs correctly, but they still stack down the page if hovered over rapidly.