How to set order of function execution when more than one function are fired/triggered simultaneously in javascript?

Question

I have transition effect (sliding up using CSS and Javascript) for a div with different content when hovered over different parts of an image (using map). Since the map has hover effect on every part of the image the slide up effect takes place only when I enter the image (NOT for individual hovers). For individual hovers (AFTER entering the image) it would only change the content of div without any transition (although I have defined a function for mouseout). How do I get transition for each section ?

---

Example of the situation:

The HTML:

<div id="rating_value"></div>
<a onMouseOver="on(0)" onMouseOut="off()">Link1</a><a onMouseOver="on(1)" onMouseOut="off()">Link2</a><a onMouseOver="on(2)" onMouseOut="off()">Link3</a>

The CSS:

#rating_value
{
height:30px;
position:relative;
top:60px;
opacity:0;
z-index:-1;
pointer-events:none;
}

The Javascript:

var rating_values=["link 1","link 2","link 3"];
function on(element)
{
    var rating=document.getElementById("rating_value");
    rating.innerHTML=rating_values[element];
    $("#rating_value").css({'opacity':'1','top':'0px','transition':'opacity 0.5s,top 0.5s ease-out'});
}
function off()
{
    $("#rating_value").css({'opacity':'0','top':'60px','transition':'opacity 0s,top 0s'});
}

Here is an example of what's happening: the problem

What I actually want: the wanted

---

The size of image is 240x48.

The image map:

        <div id="empty_star_and_its_map">
            <img src="star/all_empty.png" usemap="#empty_star_map">
            <map name="empty_star_map" onMouseOut="hide_star()">
                <area shape="rect" coords="0,0,24,48" onMouseOver="show_star(0.5)" onMouseOut="hide_star()">
                <area shape="rect" coords="24,0,48,48" onMouseOver="show_star(1)" onMouseOut="hide_star()">
                <area shape="rect" coords="48,0,72,48" onMouseOver="show_star(1.5)" onMouseOut="hide_star()">
                <area shape="rect" coords="72,0,96,48" onMouseOver="show_star(2)" onMouseOut="hide_star()">
                <area shape="rect" coords="96,0,120,48" onMouseOver="show_star(2.5)" onMouseOut="hide_star()">
                <area shape="rect" coords="120,0,144,48" onMouseOver="show_star(3)" onMouseOut="hide_star()">
                <area shape="rect" coords="144,0,168,48" onMouseOver="show_star(3.5)" onMouseOut="hide_star()">
                <area shape="rect" coords="168,0,192,48" onMouseOver="show_star(4)" onMouseOut="hide_star()">
                <area shape="rect" coords="192,0,216,48" onMouseOver="show_star(4.5)" onMouseOut="hide_star()">
                <area shape="rect" coords="216,0,240,48" onMouseOver="show_star(5)" onMouseOut="hide_star()">
            </map><!--end of map for empty stars-->
        </div><!--end of #empty_star_and_its_map-->

Answer 1

Change the inline onMouseOut to onMouseLeave