Question

我点击项目菜单时尝试更改图像不透明度;例如，如果我点击我的菜单或箭头导航上的项目新闻稿，我希望我的图像过去到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，以便它不会与面板冲突。

working example here

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

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

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

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

3 个答案: