到目前为止,我已经得到了这个代码
但我想淡出图像以便只留下可见的文本。我是否需要更改 javascript 或编写新的 css div?
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
到目前为止,我已经得到了这个代码
但我想淡出图像以便只留下可见的文本。我是否需要更改 javascript 或编写新的 css div?
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
这是 CSS3 过渡解决方案:
CSS
.thumb .text {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #999;
background: rgba(0, 0, 0, 0.3);
text-align: center;
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
transition:opacity .5s ease;
opacity:0;
}
.thumb:hover .text {
opacity:1;
}
.thumb img {
opacity:1;
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
transition:opacity .5s ease;
}
.thumb:hover img {
opacity:0;
}
支持
现在对 CSS3 过渡的支持相当不错,所有主流浏览器(Safari、Chrome、Opera、Firefox)的最新版本都支持过渡。另一方面,IE 仅从版本 10 开始支持它。虽然转换效果很好,但当某些东西不支持它时,它们不会崩溃和烧毁。元素的不透明度仍然会改变,只是没有过渡。
参考
如果要淡入文本和淡出图像,只需再添加一行:
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
$(this).children("img").fadeToggle();
});
$(this).find('img').fadeToggle();
这是你要找的吗?
$('.thumb').hover(function(){
$(this)
.find('.text-js')
.fadeToggle()
.end()
.find('img')
.fadeToggle();
});
不需要 JS 或额外的 HTML。
.thumb img {
-moz-transition: opacity .8s;
-webkit-transition: opacity .8s;
transition: opacity .8s;
}
.thumb:hover img {
opacity: 0;
}