javascript 4 个按钮，2 个工作答案

【问题标题】：javascript 4 buttons, 2 workjavascript 4 个按钮，2 个工作
【发布时间】：2015-05-31 21:58:09
【问题描述】：

我有 4 个带有 id 的图片标签：

picture_off
picture_on
go_forward
go_backward

picture_off 和 picture_on 点击时工作。但是，go_forward 应该在单击时使包含文本 id="PageOneText" 的 div 消失。这不起作用。

    $(document).ready(function () {
        $("#picture_off").click(function () {
            $("#MinecraftVideo").animate({
                opacity: '1.0'
            });
        $("#Floating_Island").animate({opacity: '0'});
        $("#picture_on").animate({opacity: '1'});
        $("#picture_off").animate({opacity: '0'});
        $("#attribute1").animate({opacity: '0'});
        $("#attribute2").animate({opacity: '1'});
        });
    });

    $(document).ready(function () {
        $("#picture_on").click(function () {
            $("#MinecraftVideo").animate({
                opacity: '0'
            });
        $("#Floating_Island").animate({opacity: '1'});
        $("#picture_off").animate({opacity: '1'});
        $("#picture_on").animate({opacity: '0'});
        $("#attribute1").animate({opacity: '1'});
        $("#attribute2").animate({opacity: '0'});
        });
    });

    $(document).ready(function () {
        $("#go_forward").click(function () {
            $("#PageOneText").animate({
                opacity: '0.0'
            });
        $("#go_forward").animate({opacity: '0'});
        $("#go_backward").animate({opacity: '1'});
        });
    });

【问题讨论】：

不需要多个 document.ready 函数；只需在同一个 document.ready 函数中注册您的处理程序。这不是绝对的，对于大型项目来说不是这样做的方法，但可以肯定的是，您不希望每个处理程序都有一个单独的 document.ready 函数！
发布一个 JSFiddle 示例
提供的信息不完整。缺乏用于寻找问题的 HTML 源代码。
另外，如果您要制作动画的只是不透明度，则无需使用 .animate()；改用 .fadeIn() 和 .fade() 简化您的代码。您发布的代码中没有任何内容可能导致问题，因此问题出在其他地方。每个 ID 都是唯一的吗？
干杯，伙计们...老实说，我昨天才开始使用 javascript 编写代码。会尝试你的建议。

标签： javascript jquery button

【解决方案1】：

各位，谢谢。问题解决了。显然这不是 javascript 错误。

我所做的是使用 CSS 来重叠两个具有精确尺寸的图像。我将其中一个的 x 值移动了 40px 和 huzzah！一切正常。

感谢您的帮助和建议。

【讨论】：