0

さて、ここに行きます、私はあなたのためにこのフィドルを持っています：

デモ

期待どおりに動作しないので、必要なものと問題点について説明します。目標は、ボックスにカーソルを合わせたときのスライド式の説明です。

これが私が欲しいものであり、機能しないものはすべて強調されています：

  • すべてのボックスには、画像、タイトル、説明があります。説明以外はすべて表示されます。
  • マウスをボックスの上に置くと、タイトル/説明がボックスの半分の高さまでスライドし、説明が表示されます。ボックスの全体の高さは変わりません。
  • 画像はボックスの境界の外側に表示されないようにする必要があります。
  • マウスをすばやく出し入れするときに、アニメーションが最後まで「ジャンプ」しないようにする必要があります。

手伝って頂けますか？

4

1 に答える 1

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の変更を行いました。 変更を確認するには、ここをクリックしてください

于 2012-08-25T13:29:03.837 に答える