用jquery改变缩略图的不透明度答案

【问题标题】：Change opacity of thumbnail with jquery用jquery改变缩略图的不透明度
【发布时间】：2013-03-30 14:05:30
【问题描述】：

我正在为一个朋友建立一个视频库，我正在尝试使用 jQuery 淡入淡出更改悬停时的缩略图不透明度。

我可以用 CSS 改变它，但我试图用 jQuery 淡化它

感谢任何关于我哪里出错的提示

到目前为止的所有内容都在this fiddle。

我认为主要问题是 jQuery 代码：

$(".thumbnail-element").hover(function () {
$(this).find('.thumb1').fadeIn(100);
},
function () {
$(this).find('.thumb1').fadeOut(100);    
});

【问题讨论】：

请问你为什么要通过 jQuery 而不是 css 来改变不透明度？
最好有一个淡入淡出，而不是仅仅将不透明度从 a 更改为 b
你想从黑白到彩色吗？
yeh 从 bw 到 color，我让它淡入但不淡出
@JamesKirkby 因为这只是视觉上的精美，而不是核心功能，我非常想用 CSS3 转换 (developer.mozilla.org/en-US/docs/Web/Guide/CSS/…) 而不是 jQuery 来做到这一点。过渡会比在 JavaScript 中执行得更好。

标签： jquery css jquery-ui hover jquery-hover

【解决方案1】：

这是我正在寻找的解决方案

  $(document).ready(function() {
        $(".thumb1").hover(
            function() {
                $(this).find('.adaptive-image').stop().animate({opacity: 0}, 200);
                }, 
                function() {
                    $(this).find('.adaptive-image').stop().animate({opacity: 1}, 500);
            }
        );
    });

【讨论】：

您仍然可以按照自己的方式进行操作，只需翻转淡入和淡出，然后定位 img 而不是 a 标签