鼠标悬停时的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
    });
});

}）;

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