圖片依序顯示

HTML

<div id="wrapper"> 
        <div id="mainmenu"> 
                <img src="http://placehold.it/80x50">
                <img src="http://placehold.it/70x50">
                <img src="http://placehold.it/100x50">
                <img src="http://placehold.it/100x50">
        </div> 
                    <div id="menuhover"></div>
</div>

CSS

#wrapper { 
        position: relative; 
        float: right;      /* 靠右，隨便靠 */
        right: 10%;     /* 隨心設定 */
        width: 400px;   /* 所有MENU小圖示都可容納顯示即可 */
        height: 90px;    /* 若沒設定高度，滑鼠移過時 MENU 會變高，造成下方區塊內容往下移 */
        border: 1px solid black;  /* 可省略 */
} 
  
#mainmenu img { 
        position: relative;   /* 方便你取得各 image 相對位置用 */
        overflow: hidden; 
} 
#menuhover { 
        position: relative; 
        display: none; 
        height: 10px;
        background-color: red;
        border: 1px black solid;
}

JavaScript

var aryPosX = [], aryWidth = []; 
$('#mainmenu img').each(function(){    
        aryPosX.push($(this).position().left);    
        aryWidth.push($(this).width());
});    
$('#mainmenu img').mouseenter(function(){    
        var idx = $(this).index();    // 取得 img 在 #mainmenu 的位置順序，值為 0、1、2、3，配合從 aryPosX 陣列內取值    
        $('#menuhover')    
               .show() 
               .stop(true, false)    // 注意這裡的 stop 設定    
                
        .animate({ 'left': aryPosX[idx], 'width': aryWidth[idx] });    
});