使用JQuery添加图像标题

我正在尝试向div添加一个图像标题，下面的代码运行良好，并且符合我的要求，但是我想请您建议将代码缩短一点：）我相信有更好的方法可以做到这一点，但我找不到它

提前谢谢

HTML

CSS

---

您可以清理javascript代码。例如：

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

希望能有帮助

---

关于。

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

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

---

有了cssThanks很多：）这段工作代码看起来好多了！也感谢您的帮助，代码运行良好：）

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

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

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