javascript - 投掷错误中的翻转淡入淡出

Question

我的目标是创建一个翻转文本显示小工具。当用户将鼠标悬停在图片上时，图片会淡出（不透明度降低），然后出现一个文本。当用户将鼠标悬停在图片之外时，它会切换回正常状态（pciture 的 opacity=1，文本消失）。

我测试了我的早期版本，当悬停图片时，我没有看到任何文字出现。我通过调试器运行并得到以下错误：

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

我在JSFiddle中复制了我的小项目。如果有人可以帮助我的文字出现并删除错误，将不胜感激。谢谢！

Answer 1

两件事情：

1. jQuery 没有一个函数叫做display
2. 在您的小提琴中，.hovertextspan 不是 的子级.pic，因此$('.hovertext', $(this))，其中$(this)一个图像在哪里，不会选择任何内容。

Answer 2

由于状态，您应该使用它.fadeTo()而不是.slideToggle()它会自动切换onhover：

JavaScript

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

Answer 3

我认为您可以使用 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;
}