JavaScript 代码重构和 fadeIn 属性

Question

我是 Javascript 的新手，正在寻找有关重构以下代码以提高效率的建议。

该代码执行以下操作: 1. 19张图像淡入，有各种延迟 2. 当鼠标悬停在其中一张图片上时，该图片的说明将出现在屏幕顶部的 div 中。

任何帮助创建一个新的、更短的代码来完成同样的事情的人都会非常有帮助，因为 19 张图像目前需要大量的 JavaScript 代码空间，如果没有更优雅的脚本我会感到惊讶完成同样的事情。

另外，我想给出现在窗口顶部的div添加淡入效果，但一直无法正确添加。

感谢您的宝贵时间和帮助。

HTML 示例

<div id="arch">
    <div class="fade-in two-seven">
        <img src="myimage" />
    </div>
</div>
<!--Fade In Image-->
<div id="arch-con">
    <p>Some text</p>
</div>
<!--Top Screen div-->
<div id="bran">
    <div class="fade-in three-one">
        <img src="myimage" />
    </div>
</div>
<div id="bran-con">
    <p>Some text</p>
</div>
<div id="code">
    <div class="fade-in three-nine">
        <img src="myimage" ALT="" />
    </div>
</div>
<div id="code-con">
    <p>Some Text</p>
</div>

CSS 示例

#arch {
    left: 25%;
    top: 27%;
    width: 14%;
    height: auto;
    visibility: visible;
    position: absolute;
}
#arch:hover {
    transform: scale(1.05);
}
#arch-con {
    width: 30%;
    height: 12%;
    position: absolute;
    background: rgba(0, 18, 150, 0.81) none repeat scroll 0% 0%;
    border: 4px solid #FFF;
    border-radius: 20px;
    display: none;
    line-height: 0px;
    padding: 11px;
    margin: 0px;
    left: 35%;
    text-align: center;
}
#arch-con p {
    color: white;
    font-size:120%
}
#bran {
    left: 44%;
    top: 27%;
    width: 18%;
    height: auto;
    visibility: visible;
    position: absolute;
}
#bran:hover {
    transform: scale(1.05);
}
#bran-con {
    width: 30%;
    height: 12%;
    position: absolute;
    background: rgba(0, 18, 150, 0.81) none repeat scroll 0% 0%;
    border: 4px solid #FFF;
    border-radius: 20px;
    display: none;
    line-height: 0px;
    padding: 11px;
    margin: 0px;
    left: 35%;
    text-align: center;
}
#bran-con p {
    color: white;
    font-size:120%
}
#code {
    left: 66%;
    top: 27%;
    width: 14.5%;
    height: auto;
    visibility: visible;
    position: absolute;
}
#code:hover {
    transform: scale(1.05);
}
#code-con {
    width: 30%;
    height: 12%;
    position: absolute;
    background: rgba(0, 18, 150, 0.81) none repeat scroll 0% 0%;
    border: 4px solid #FFF;
    border-radius: 20px;
    display: none;
    line-height: 0px;
    padding: 11px;
    margin: 0px;
    left: 35%;
    text-align: center;
}
#code-con p {
    color: white;
    font-size:120%
}

JavaScript 示例

$(document).ready(function () {
    $("#arch").on("mouseenter", function () {
        $("#arch-con").show();
    }).on("mouseleave", function () {
        $("#arch-con").hide();
    });
});
$(document).ready(function () {
    $("#bran").on("mouseenter", function () {
        $("#bran-con").show();
    }).on("mouseleave", function () {
        $("#bran-con").hide();
    });
});
$(document).ready(function () {
    $("#code").on("mouseenter", function () {
        $("#code-con").show();
    }).on("mouseleave", function () {
        $("#code-con").hide();
    });
});

Answer 1

您可以通过使用通用类以更加 DRY 的方式实现您需要的东西:

<div id="arch" class="image-container">
    <div class="fade-in two-seven">
        <img src="myimage" />
    </div>
</div>
<div id="arch-con" class="text-container">
    <p>Some text</p>
</div>

<div id="bran" class="image-container">
    <div class="fade-in three-one">
        <img src="myimage" />
    </div>
</div>
<div id="bran-con" class="text-container">
    <p>Some text</p>
</div>

<div id="code" class="image-container">
    <div class="fade-in three-nine">
        <img src="myimage" ALT="" />
    </div>
</div>
<div id="code-con" class="text-container">
    <p>Some Text</p>
</div>

然后你可以在这个类的所有元素上使用相同的函数:

$(function() {
    $('.image-container').hover(function() {
        $(this).next('.text-container').toggle();
    });             
});

另请注意，您可以将 hover() 事件与 toggle() 一起使用，以进一步整理逻辑。

Example fiddle