我可以在淡入/淡出 JQuery 函数中使用 <a> 标记按钮类吗?

Can I use <a> tag button classes in fade in/out JQuery function?

本文关键字：按钮 JQuery 淡出 函数 我可以 淡入      更新时间：2023-09-26

我有一个jQuery图像拇指滑块，其中每个拇指都是一个"链接到不同div元素的标签按钮。

当用户单击拇指按钮时，我希望关联的div 对淡入进行动画处理，当用户单击另一个时，上一个div 应该淡出并淡入/替换为下一个。

我是jQuery的新手，我花了很多时间研究这个函数的使用，我对那里的许多解决方案感到困惑。

我觉得我在代码中缺少一些东西，但我不知道是什么。

以下是我到目前为止所拥有的：

.CSS

滑 块

#aemcSlider {
    list-style:none;
    margin-left: 289px;
    width: 474px;
    height: 97px;
    top: 134px;
    position: absolute;
    overflow: hidden;
    left: -3px;
}
#aemcSlider a {
    margin-right: -4px;
}
#aemcPkgContainer {
    z-index:1;
    width: 425px;
    height: 675px;
    position: absolute;
    left: 320px;
    top: 233px;
}
#aemcGroundAdContainer {
    z-index:2;
    display: none;
    width: 425px;
    height: 675px;
    position: absolute;
    left: 320px;
    top: 233px;
}
#aemcClampOnAdContainer {
    z-index:3;
    display: none;
    width: 425px;
    height: 675px;
    position: absolute;
    left: 320px;
    top: 233px;
}
#aemcMetrixContainer {
    z-index:4;
    display: none;
    width: 425px;
    height: 675px;
    position: absolute;
    left: 320px;
    top: 233px;
}

按钮

像这样的 4 个按钮//

a.aemcGroundFlexBut {
    position:relative;
    float: left;
    margin: 0 auto;
    display: block;
    width: 162px;
    height: 114px;
    background: url(../Images/AEMC_AD_6472-74.png) no-repeat 0 0;
}
a.aemcGroundFlexBut:hover {
    background-position: 0 -114px;
}

.HTML

Jquery 滑块

<div id="aemcSlider">
    <ul>
        <li><a class="aemcPkgBut" href="#"></a></li>
        <li><a class="aemcGroundFlexBut" href="#"></a></li>
        <li><a class="aemcClampBut" href="#"></a></li>
        <li><a class="aemcMetrixBut" href="#"></a></li>
    </ul>
</div>

器皿：

有4个这样的容器//

<div id="aemcPkgContainer">
    <div class="workImage">
        <img src="Images/AEMC_packaging_image.png" alt="Packaging"    
width="295"  hspace="0" vspace="0" border="0" title="Packaging"/>
    </div>
</div>

.JS：

JavaScript 文档

$(document).ready(function () {
    $(".aemcPkgBut").click(function () {
        $("#aemcGroundAdContainer").fadeOut(2500);
        $("#aemcClampOnAdContainer").fadeOut(2500);
        $("#aemcMetrixContainer").fadeOut(2500);
        $("#aemcPkgContainer").fadeIn(2500);
    });
    $(".aemcGroundFlexBut").click(function () {
        $("#aemcPkgContainer").fadeOut(2500);
        $("#aemcClampOnAdContainer").fadeOut(2500);
        $("#aemcMetrixContainer").fadeOut(2500);
        $("#aemcGroundAdContainer").fadeIn(2500);
    });
    $(".aemcClampBut").click(function () {
        $("#aemcPkgContainer").fadeOut(2500);
        $("#aemcGroundAdContainer").fadeOut(2500);
        $("#aemcMetrixContainer").fadeOut(2500);
        $("#aemcClampOnAdContainer").fadeIn(2500);
    });
    $(".aemcMetrixBut").click(function () {
        $("#aemcPkgContainer").fadeOut(2500);
        $("#aemcGroundAdContainer").fadeOut(2500);
        $("#aemcClampOnAdContainer").fadeOut(2500);
        $("#aemcMetrixContainer").fadeIn(2500);
    });
});

以上是行不通的。

我正在使用标签按钮...这可能是问题所在吗？

任何帮助将不胜感激。

谢谢！

我认为这应该不是问题...我尝试使用您的代码来复制该行为。

看看这个小提琴...希望有帮助。

小提琴

$(document).ready(function () {
    $(".aA").click(function () {
        $('#A').fadeIn(1000);
        $('#B').fadeOut(1000);
    });

    $(".aB").click(function () {
        $('#A').fadeOut(1000);
        $('#B').fadeIn(1000);
    }); });
相关文章：