DEMO

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

这就是我想要的， 强调一切不起作用 ：

每个方框都有图像，标题和说明。除了描述之外的所有内容都是可见的。
当鼠标悬停在方框上时，标题/说明会滑动到 方框的半高 ，这使说明可见。 框的整体高度不会改变。
图片应在框的边界外不可见 。
当快速移入和移出鼠标时，动画不应“跳”到最后。

你能帮助我吗？

Answer 1

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

我正在放置小提琴链接click here for demo

和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更改。 Click here to see the changes

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

DEMO

1 个答案: