與Jquery懸停的菜單顏色淡入淡出

此社區的成員之一足以產生一些JQuery代碼，實際上，它會在滾動時淡入顏色並在滾出時淡出。爲了方便起見，我在這裏包含了JSFiddle鏈接。主要功能運作良好。但是，當我快速懸停和停止按鈕時，即使鼠標懸停在按鈕上，懸停狀態也會變爲休眠狀態，但似乎會出現延遲響應。我非常接近我正在尋找的東西，並且這個社區的支持最受讚賞！與Jquery懸停的菜單顏色淡入淡出

的jsfiddle：http://jsfiddle.net/RV6fE/3/

jQuery的

$(document).ready(function() { 

    //Set the anchor link opacity to 0 and begin hover function 
    $("#menu-sample-menu li a").hover(function() { 

     //Fade to an opacity of 1 at a speed of 200ms 
     $(this).fadeOut(0).addClass('hover').fadeIn(300); 

     //On mouse-off 
    }, function() { 

     //Fade to an opacity of 0 at a speed of 100ms 
     $(this).fadeOut(300) 
      .queue(function() { 
      $(this).removeClass('hover').fadeIn(0).dequeue() 
     }); 

    }); 
});

HTML

<nav id="access"> 
    <ul id="menu-sample-menu" class="menu"> 
     <li id="menu-item-198" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-198"><a href="http://www.threecell.com/demo/category/health-care-professional/">Health Care Professional</a> 

     </li> 
     <li id="menu-item-197" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-197"><a href="http://www.threecell.com/demo/category/web-designer/">Web Designer</a> 

      <ul class="sub-menu"> 
       <li id="menu-item-199" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-199"><a href="http://www.threecell.com/demo/category/construction-worker/">Construction Worker</a> 

       </li> 
      </ul> 
     </li> 
    </ul> 
</nav>

風格

#access { 
    padding:0 20px; 
    background:#111; 
    box-shadow:0 0 7px rgba(0, 0, 0, .1); 
} 

#access ul { 
    float:left; 
    padding:0; 
    margin:0; 
    list-style:none; 
    font-weight:600; 
    text-transform:uppercase; 
} 

#access li { 
    position:relative; 
    float:left; 
    padding:0; 
    margin:0; 
} 

#access ul li:first-child { 
    padding-left:0; 
} 

#access a { 
    display:block; 
    padding:15px 24px; 
    color:#f0f0f0; 
    text-decoration:none; 

} 

#menu-sample-menu li { 
    color: black; 
    text-shadow: 0px 1px 4px #777; 
    background-color: green; 
    padding: 0 12px 0 12px; 
} 

#menu-sample-menu li a.hover { 
    background: orange; 
} 


#access li.current_page_item > a, 
#access li.current-menu-item > a { 
    background: orange; 
    color: white; 
    text-decoration:none; 
} 

#access a span { 
    color:#999; 
    font-size:11px; 
    font-style:italic; 
    font-weight:normal; 
    line-height:1.62em; 
    text-transform:none; 
}

在此先感謝您的幫助，

來源

2013-08-26 user2325396

爲什麼你不使用CSS過渡或使用jQuery UI的顏色轉換？ –

我其實並不想使用CSS3，因爲缺乏IE9的支持。關於顏色轉換，我有興趣瞭解這將如何工作以及與以上代碼的區別 – user2325396

啊，好的。我真的不關心IE，因爲我是一個Linux粉絲...... :-) –

嘗試加入stop()停止當前正在運行的動畫，像

... 
$(this).stop().fadeOut(0).addClass('hover').fadeIn(300); 
...

和

... 
$(this).stop().fadeOut(300) 
    .queue(function() { 
     $(this).removeClass('hover').fadeIn(0).dequeue() 
}); 
....

演示:: jsFiddle

來源

2013-08-26 03:28:50

你測試過了嗎？我試着停下來但沒有成功。 –

請檢查小提琴鏈接 –

好，+1。 :-)我總是喜歡jsfiddles。 –

您可以告訴元素在開始動畫之前立即停止它正在做的事情。

 
    $("#menu-sample-menu li a").hover(function() { 

     //Fade to an opacity of 1 at a speed of 200ms 
     $(this).stop().fadeOut(0).addClass('hover').fadeIn(300); 

     //On mouse-off 
    }, function() { 

     //Fade to an opacity of 0 at a speed of 100ms 
     $(this).stop().fadeOut(300) 
      .queue(function() { 
      $(this).removeClass('hover').fadeIn(0).dequeue() 
     }); 

    });

來源

2013-08-26 03:28:06

嗨Caleb ...完美。這正是我需要的。謝謝 – user2325396

嗨Caleb，可以提供一些指導如何淡出只是背景沒有文字鏈接淡出嗎？謝謝！ – user2325396

也許這可能對你有一些幫助：http://stackoverflow.com/questions/4612075/jquery-fade-to-color-on-mouse-hover –

您可以使用此功能CSS3：

#access { 
padding:0 20px; 
background:#111; 
box-shadow:0 0 7px rgba(0, 0, 0, .1); 
} 

#access ul { 
float:left; 
padding:0; 
margin:0; 
list-style:none; 
font-weight:600; 
text-transform:uppercase; 
} 

#access li { 
position:relative; 
float:left; 
padding:0; 
margin:0; 
} 

#access ul li:first-child { 
padding-left:0; 
} 

#access a { 
display:block; 
padding:15px 24px; 
color:#f0f0f0; 
text-decoration:none; 

} 

#menu-sample-menu li { 
color: black; 
text-shadow: 0px 1px 4px #777; 
background-color: green; 
-webkit-transition: background-color 0.4s ease; /* CSS3 feature for your background-color transition */ 
-moz-transition: background-color 0.4s ease; 
-o-transition: background-color 0.4s ease; 
transition: background-color 0.4s ease; 
padding: 0 12px 0 12px; 
} 

#menu-sample-menu li:hover { 
background: orange; 
} 


#access li.current_page_item > a, 
#access li.current-menu-item > a { 
background: orange; 
color: white; 
text-decoration:none; 
} 

#access a span { 
color:#999; 
font-size:11px; 
font-style:italic; 
font-weight:normal; 
line-height:1.62em; 
text-transform:none; 
}

而不是JQuery。這裏是你可能想要的結果：http://jsfiddle.net/RV6fE/12/

來源

2013-08-26 03:40:30

謝謝你的css3替代品。我想和Jquery一起去，以便它能在Ie9中得到支持。 – user2325396

與Jquery懸停的菜單顏色淡入淡出

回答

相關問題