0

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

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

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

4

3 回答 3

2

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

您需要更改添加 id 属性:

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

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

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

这里的工作示例

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

于 2014-04-22T17:46:46.537 回答
1

@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

于 2014-04-22T18:12:54.667 回答
0

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

于 2014-04-22T17:55:04.167 回答