翻轉淡入會引發錯誤

Question

我的目標是創建一個過渡文本顯示小工具。 當用戶將鼠標懸停在圖片上方時，圖片會褪色（不透明度降低），然后出現文本。 當用戶將鼠標懸停在圖片之外時，它將切換回正常狀態（照片的不透明度= 1，文本消失了）。

我測試了我的早期版本，將鼠標懸停在圖片上時，沒有看到任何文字出現。 我通過調試器，並遇到以下錯誤：

Uncaught TypeError: Object [object Object] has no method 'display' 

我已經在JSFiddle中復制了我的小項目。 如果有人可以幫助我顯示文本並消除錯誤，將不勝感激。 謝謝！

Answer 1

兩件事情：

1. jQuery沒有名為display的函數
2. 在您的小提琴中， .hovertext范圍不是.hovertext的子.pic ，因此$('.hovertext', $(this)) （其中$(this)是圖像之一$(this)不會選擇任何內容。

Answer 2

我認為您可以使用CSS3過渡來獲得類似的效果： http : //jsfiddle.net/derekstory/bzf6L/1/

img {
    position: absolute;
    opacity:1;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}
img:hover {
    opacity : .2;
}
span {
    font-family:Arial, Verdana, sans-serif;
}
.hovertext {
    position: aboslute;
    text-align:center;
}

Answer 3

您應該使用.fadeTo()而不是.slideToggle() ，因為處於onhover狀態，它會自動切換：

的JavaScript

$('.pic').hover(function() {
    $(this).fadeTo(9);
    //here is the place for the function to show the text.
});