淡入（）顯示第一，然後褪色

Question

我在做一個固定的菜單至極有一個工具提示，當你在做鼠標上的物品就應該出現一個IMMAGE做淡入（），但behavor是如此怪異它出現，然後再使淡入AMM我不知道這是什麼病發生的事情讓你的代碼，看看是否有人能解釋我發生什麼事，也幫助我，我AMM學習，我會欣賞它太多！

HTML

<div id="nav-pPal"> 
    <ul class="nav-Ppal"> 
    <li> 
     <div class="tooltip"></div> 
     <a class="btns-nav" id="0" href="#block-intro">01</a> 
    </li> 
    <li> 
     <div class="tooltip"></div> 
     <a class="btns-nav" id="1" href="#block-pq-zolfunza">02</a> 
    </li> 
    <li> 
     <div class="tooltip"></div> 
     <a class="btns-nav" id="2" href="#block-modulos-zolfunza">03</a>  
    </li> 
    <li> 
     <div class="tooltip"></div> 
     <a class="btns-nav" id="3" href="#block-seguridad">04</a> 
    </li> 
    <li> 
     <div class="tooltip"></div> 
     <a class="btns-nav" id="4" href="#block-desarrollo">05</a> 
    </li> 
    <li> 
     <div class="tooltip"></div> 
     <a class="btns-nav" id="5" href="#block-nuestra-ubic">06</a> 
    </li> 
    <li> 
     <div class="tooltip"></div> 
     <a class="btns-nav" id="6" href="#block-noticias">07</a> 
    </li> 
    <li> 
     <div class="tooltip"></div> 
     <a class="btns-nav" id="7" href="#block-preguntas">08</a> 
    </li> 
    <li> 
     <div class="tooltip"></div> 
     <a class="btns-nav" id="8" href="#block-contacto">09</a> 
    </li> 
    </ul> 
</div> 

這是CSS

#nav-pPal { 
width:30px; 
height:auto; 
position:fixed; 
right:0; 
top:30%; 
z-index:5; 
} 

.nav-Ppal li a { 
width: 30px; 
height: 22px; 
padding-top:8px; 
text-align:center; 
display:block; 
text-decoration:none; 
color:#FFF; 
cursor:pointer; 
background-color: #000; 
color: #FFF; 
opacity: 1; 
-moz-opacity: 0.70; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70); 
cursor:pointer; 
font-family: 'lucida_sans_unicoderegular', Helvetica, Arial, sans-serif; 
font-size:11px; 
} 



.tooltip{ 
background: black; 
display: none; 
height: 140px; 
position: absolute; 
right: 32px; 
width: 200px; 
transition: all .2s ease; 
} 

FINNALLY jQuery的 // ------------刀尖主菜單----- -------

$(".btns-nav").on("mouseover", displayPreview); 

function displayPreview(){ 
    $(this).prev().fadeIn("slow"); 
    console.log(this); 
} 

$(".btns-nav").on("mouseleave", hiePreview); 

function hidePreview(){ 
    $(this).prev().fadeOut("slow"); 

Answer 1

刪除這個CSS行：

transition: all .2s ease; 

工作小提琴：http://jsfiddle.net/ZTSe4/7/

Answer 2

隱藏所有其他工具提示，然後顯示徘徊之一：

$(".tooltip").hide(); 
$(this).prev().fadeIn("slow"); 

http://jsfiddle.net/gRPnP/1/