Javascript jquery onclick-fadein效果

我刚刚开始学习jquery，对JS的了解很少（长话短说——我听说它有助于提供快捷方式——如果我有时间，我会正确地学习JS）

有了这一点，我试图从本质上创建一个滚动字幕或多帧英雄横幅，无论你想叫它什么。我不想要任何自动化，我特别希望最终用户单击按钮/图像来更改字幕图像

我对jquery的原样有问题，我想在另一件我正在努力解决的事情上寻求帮助，那就是隐藏当前显示的图像

我当前的jquery有什么问题，它不能正常工作？
A.文件加载在页面顶部
B当我执行jquery的（$（“#imgd2”）.fadeIn；）部分时，它在firebug中工作，但在click函数中它不

我如何才能继续查看当前显示的图像，隐藏该图像并在适当的图像中淡入淡出。例如，默认情况下显示img1，如果我单击img3，如何在消失在字幕3中之前隐藏图像1

//html-原谅懒惰
//我在默认情况下显示第一个图像，并在页面上隐藏其他两个图像

<div style="width: 100%; height: 450px;" id="img-container">

<div id="imgd1" style="width: 432px; height: 398px; position: absolute; background-image: url(img1.jpg); background-size: cover;"></div>
<div id="imgd2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img2.jpg); background-size: cover;"></div>
<div id="imgd3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img3.jpg); background-size: cover;"></div>

<div style="position: absolute; top: 438px; left: 322px;" id="bttns">
<img id="img1" src="active.png">
<img id="img2" src="active.png">
<img id="img3" src="active.png"> 
</div>

</div>

---

提前谢谢

fadeIn

是一个函数，您需要调用它

$("#imgd3").fadeIn();

不必为每个

imgd

元素编写单击处理程序，您可以将所有元素作为目标（通过添加一个类

imgd

），并使用

data-*

属性指定要显示的图像（

data target

属性和图像的id）。另外，在所有图像中添加一个类

img

，以便我们可以轻松地隐藏它

<div style="width: 100%; height: 450px;" id="img-container">
    <div id="imgd1" class="imgd" style="width: 432px; height: 398px; position: absolute; background-image: url(//placehold.it/432x398/ff0000); background-size: cover;"></div>
    <div id="imgd2" class="imgd" data-target="#img2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/00ff00); background-size: cover;"></div>
    <div id="imgd3" class="imgd" data-target="#img3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/0000ff); background-size: cover;"></div>
    <div style="position: absolute; top: 438px; left: 322px;" id="bttns">
        <img id="img1" class="img" data-target="#imgd1" src="//placehold.it/32/ff0000" />
        <img id="img2" class="img" data-target="#imgd2" src="//placehold.it/32/00ff00" />
        <img id="img3" class="img" data-target="#imgd3" src="//placehold.it/32/0000ff" />
    </div>
</div>

---

演示：

它必须有一个括号：-）

$（“#imgd5”）.fadeIn（）

关于问题2，这是我的提琴，我想买一个能用的房子。这就是未执行的
jQuery.fadeIn
函数。要执行函数，需要括号。当然，如果你做了
varfi=$（'#img1'）。fadeIn；fi（）上下文可能会改变，产生问题，但这将是您稍后将了解的内容。感谢您尝试提供帮助！这里有些东西工作不正常。我注意到html中的数据目标拼错了，但这不起作用。有什么想法吗？这就像我的图像无法点击使JS工作一样…@user2828701抱歉，我将
imgd
元素设置为可点击而不是
img
元素，请参阅更新和demo@scrowler对不起，哪个是复制品id@ArunPJohny我跳了枪，没看到“d” :) apologies@ArunPJohny看起来您的代码正在为我处理一个新页面，但在我需要它的页面上不起作用。这些div和图像是由php提供的…不确定这是否会影响任何东西…但我很可能有某种类型的打字错误，这导致无法工作…感谢您的帮助@博纳基德谢谢你的帮助。当我在firebug工作时，不知何故，它被从我的帖子中删除了。对第二个问题有什么想法吗？我更新了我的答案，希望能有所帮助。另外，我使用按钮是因为我的互联网连接很慢。。。
<div style="width: 100%; height: 450px;" id="img-container">
    <div id="imgd1" class="imgd" style="width: 432px; height: 398px; position: absolute; background-image: url(//placehold.it/432x398/ff0000); background-size: cover;"></div>
    <div id="imgd2" class="imgd" data-target="#img2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/00ff00); background-size: cover;"></div>
    <div id="imgd3" class="imgd" data-target="#img3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/0000ff); background-size: cover;"></div>
    <div style="position: absolute; top: 438px; left: 322px;" id="bttns">
        <img id="img1" class="img" data-target="#imgd1" src="//placehold.it/32/ff0000" />
        <img id="img2" class="img" data-target="#imgd2" src="//placehold.it/32/00ff00" />
        <img id="img3" class="img" data-target="#imgd3" src="//placehold.it/32/0000ff" />
    </div>
</div>

jQuery(function ($) {
    var $imgds = $('.imgd');
    $('.img').click(function () {
        var $target = $($(this).data('target'));
        $imgds.not($target).hide();
        $target.stop(true, true).fadeIn();
    })
});