3

改訂版については下部を確認してください

了解しました。これが問題です。私は内側にを持っていliますdiv、そして私はを上にスライドさせて見えるようにするためにホバーしようとしていますli。div

HTMLは次のとおりです。

<li id="one">
    <div>
        <h4>title</h4>
        <p>description</p>
    </div>
</li>

現在、CSSにこれがあります。

#one div { display: none; }

そしてこれは私のJSのために：

$(document).ready(function() {

    $('#one').hover(function() {
        $('#one > div').css({ display : 'block' });
    });

});

CSS psuedo:hoverを使用してポップアップさせることができることは知っていますが、スライドエフェクトを使用したい場合は、すべてJSで実行したほうがよいと思いました。最初の問題は、これが機能していないことです：|。表示されたら、スライドエフェクトを追加したいのですが、これが正しい方法かどうかはわかりません。

ありがとうみんな/ギャル

改訂

新しいJavaScript

$(document).ready(function() {

    $('#one').hover(function () {
        $('#one > div').slideToggle();
    });

});

これはうまくいきます！上から下がっていますが、下から上に上げる予定でした。

4

5 に答える 5

4

問題の一部は、slideUp()jQueryで選択が非表示になり、選択がslideDown() 表示されることです。要素をビューにスライドさせるには、独自の.animate().

CSS:
  #one {
    overflow: hidden;
    position: relative;
    border: 1px solid gray;
    height: 40px;
  }

  #one div { 
    position: absolute;
    bottom: -100%;
  }

jQuery:
  $('#one').hover(
    function() {
        $(this).find('div').animate({
            bottom: '0%'
        }, 'fast' );
    },function() {
        $(this).find('div').animate({
            bottom: '-100%'
        },'fast');
    }
  );

jsFiddle: http://jsfiddle.net/blineberry/mrzqK/

于 2011-10-14T00:29:37.500 に答える
2

jQueryslideUpまたはを使用するのはfadeInどうですか？

http://api.jquery.com/slideToggle/

http://api.jquery.com/slideDown/

http://api.jquery.com/slideUp/

このコードは私にとってはうまくいきます。

$(document).ready(function () {

    $('#one').hover(function () {
        $('#one > div').slideDown();
    });

});

見栄えを良くするには少し調整が必要ですが、滑り落ちます。

編集

animate を使用して目的の操作を行う方法について説明しているサイトを次に示します。

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

于 2011-10-13T23:57:16.150 に答える
1

あなたはこのようなことをするかもしれません

$(div).show("スライド", {方向: "下" }, 1000)

またはアニメーションプロパティでさえあなたの問題を解決するかもしれません

詳細はこちら

http://docs.jquery.com/UI/Effects/Slide api.jquery.com/animate/

于 2011-10-13T23:59:08.703 に答える
1

最初に、min-width と min-height などを作成する必要があります。現在、li にはホバーするものが何もないためです。について話す。）

第二に、あなたはslideDown()したいと思います...slideUp()はそれを消すと思いますよね？

デモ用に背景色を追加しました。

ちょっとしたデモを聞く: http://jsfiddle.net/R9A3G/

特定のアニメーションを探している場合は、jquery .animate() とともに css トリックを実行する必要がある場合があります。

于 2011-10-14T00:14:19.710 に答える
1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <style>#one div { display: none; }</style>
<head>
  <title></title>
</head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
   <script>
   $(document).ready(function() {

    $('#one').hover(function() {

      $("#one").find("div").slideDown("slow");
    });
    $('#one').mouseout(function() {

      $("#one").find("div").slideUp("slow");
    });
});
</script>

<body>
<div>
    <li id="one">
    <div>
        <h4>title</h4>
        <p>description</p>
    </div>
</li>
  </div>
</body>

</html>

これを試して

于 2011-10-14T00:43:48.063 に答える