javascript - 鼠标悬停时的jQuery透明图像描述幻灯片动画

Question

好的，我们开始吧，我有这个小提琴给你：

演示

它没有按预期工作，所以我将描述我需要什么以及问题所在。目标是悬停框时的滑动描述。

这是我想要的，并且强调了所有不起作用的东西：

• 每个盒子都有一个图像、一个标题和一个描述。除了描述之外的所有内容都是可见的。
• 当鼠标悬停在一个盒子上时，标题/描述会滑到盒子的一半高度，这使得描述可见。盒子的整体高度没有变化。
• 图像在框的范围之外应该是不可见的。
• 快速进出鼠标时，动画不应“跳”到最后。

你能帮助我吗？

Answer 1

试试这个，不确定，但我认为这是你的答案。

我把小提琴链接点击这里进行演示

和JS代码：

jQuery(function() {
    $('.box').hover(function() {
        var _tst = this;
        jQuery(this).find(".text").animate({
        "height": jQuery(_tst).find(".text").height() + jQuery(_tst).find(".desc").height()
    }, {
        duration: 600,
        queue: false
    });
    jQuery(this).find(".img").animate({
        "top": -jQuery(_tst).find(".desc").height()
    }, {
        duration: 600,
        queue: false
    });
}, function() {
    jQuery(this).find(".text").animate({
        "height": "30px"
    }, {
        duration: 600,
        queue: false
    });
    jQuery(this).find(".img").animate({
        "top": 0
    }, {
        duration: 600,
        queue: false
    });
});

});​</p>

并做了一些CSS更改。 单击此处查看更改