jquery - 更改图像不透明度 onclick 菜单项

Question

当我单击项目菜单时，我正在尝试更改图像不透明度；例如，如果我单击菜单或箭头导航上的项目 Newsletter，我希望我的图像过去的不透明度为 0 到 100。在我的 css 中，我在我的 jquery 代码中声明我的图像不透明度为 0 我做过：

$("#newsletter").click(function () {
    $('#img1').fadeTo(3000,1);
});

但什么也没有发生。我完全迷路了。你有什么想法吗？这是我的小提琴：http: //jsfiddle.net/jarod51/4RvWY/

Answer 1

您的锚标记实际上没有“时事通讯”的 id：

您需要更改添加 id 属性：

<li><a id="newsletter-button" href="#newsletter">Newsletter</a></li>

$("#newsletter-button").click(function () {
            $('#img1').fadeTo(3000,1);
    });

我已经更改了按钮的 ID，使其不会与面板冲突。

这里的工作示例

除非您打算将点击事件连接到实际面板？

Answer 2

@skeryl 对当前的问题（没有 id）有正确的答案，但是当 CSS 可以做到时，为什么要将它与 jQuery 动画联系起来呢？完成滚动动画后，将一个类添加到活动面板。然后使用 css 和 css 过渡来为该类面板中的图像的不透明度设置动画。

在您的animation功能内：

    $('#wrap').find('.shown').removeClass('shown');
    $target.addClass('shown');

在你的 CSS 中：

.panel img {
    opacity:0;
    -moz-transition: opacity 3000ms ease-in-out;
    -webkit-transition: opacity 3000ms ease-in-out;
    transition: opacity 3000ms ease-in-out;
}

.shown img {
    opacity: 1;
}

此外，当您将更多图像添加到滑块/导航时，跳过 ID 将阻止您追逐您的尾巴。

这是一个更新的Fiddle。

Answer 3

实际面板可以吗？因为当例如时事通讯处于活动状态时，我每次都需要有这种效果。