Question

我正在尝试将图片标题添加到div中，下面的代码工作正常并做我想要的，但是我想问你的建议让代码更短:)我相信有更好的这样做的方法，但我找不到它。

提前致谢。

HTML

<div id="firstBlock" class="block"><p class="caption c1">Description</p></div>
<div id="secondBlock" class="block"><p class="caption c2">Description</p></div>
<div id="thirdBlock" class="block"><p class="caption c3">Description</p></div>
<div id="fourthBlock" class="block"><p class="caption c4">Description</p></div>

JQuery的

    $("#firstBlock").hover(
        function(){
    $(".caption.c1").animate({"margin-left": "0px"});
        },
        function(){
    $(".caption.c1").animate({"margin-left": "-200px"});
        }
    );

    $("#secondBlock").hover(
        function(){
    $(".caption.c2").animate({"margin-left": "0px"});
        },
        function(){
    $(".caption.c2").animate({"margin-left": "-200px"});
        }
    );

    $("#thirdBlock").hover(
        function(){
    $(".caption.c3").animate({"margin-left": "0px"});
        },
        function(){
    $(".caption.c3").animate({"margin-left": "-200px"});
        }
    );

    $("#fourthBlock").hover(
        function(){
    $(".caption.c4").animate({"margin-left": "0px"});
        },
        function(){
    $(".caption.c4").animate({"margin-left": "-200px"});
        }
    );

CSS

.caption{
height: 150px;
width: 200px;
text-align: center;
margin-left: -200px;
margin-top: 350px;
background: black;
color: white;
}

Answer 1

您可以清理您的JavaScript代码。例如：

$('.block').hover(function() {
  $(this).find('.caption').animate({
     "margin-left": "0px"       
  });
}, function() {
  $(this).find('.caption').animate({
     "margin-left": "-200px",
  });
});

希望它有所帮助。

问候。

Answer 2

无需使用单独的课程。使用公共类，然后找到标题。

$(".block").hover(
    function () {
        $(this).find(".caption").animate({
            "margin-left": "0px"
        });
    },
    function () {
        $(this).find(".caption").animate({
            "margin-left": "-200px"
        });
    }
);

使用JQuery添加图像标题

2 个答案: