1

jQueryをイージングプラグインと一緒にjqueryプラグインを使用します。

私は一連のアンカーをリストに持っていますが、それらはすべて固定の高さと幅です。各div内には、私が「コンテンツ」と呼んでいる別のdivがあります。これは絶対位置に配置され、マウスが含まれているdivに入ると、下からスライドして表示されます。マウスが含まれているdivを離れると、「content」divがスライドして表示されなくなります。

私はこれを上と下の値の組み合わせを使用して機能させましたが、これはクロスブラウザーでは機能しません（私が知る限り、Firefoxでのみ正しく機能します）。このためのコードは以下のとおりです（html、css、javascript）：

<!doctype html>

<head>

    <style>

        .index {
            float: left;
            margin: 0 0 30px 0;
            margin-left: 0;
            padding: 0;
            position: relative;
            }
        .index li {
            border: 2px solid #f3f3f3;
            float: left;
            list-style: none;
            font-family:"Helvetica";
            font-size:14px;
            font-weight:normal;
            margin: 0 10px 10px 0;
            padding: 1px;
            position: relative;
            }
        .index li a {
            float: left;
            height: 126px;
            overflow: hidden;
            position: relative;
            width: 224px;
            }
        .index li img {
            display: block;
            }
        .index li .content {
            background: #f7f7f7;
            bottom: auto;
            display: block;
            margin: 0;
            padding: 10px 0 3px;
            position: absolute;
            top: 132px;
            width: 224px;
            }
        .index li a:hover .content {
            bottom: 0;
            top: auto;
            }
        .index .content h3 {
            background: url(../img/content/arw-sma.png) no-repeat 0 -100px;
            color: #666;
            margin: 0 10px 1px;
            padding-left: 20px;
            }   
        .index .content p {
            color: #999;
            display: block;
            float: left;
            font-size: 12px;
            margin: 0 10px 2px;
            padding: 0;
            }

    </style>

    <script src="js//jquery-1.6.2.min.js"></script>
    <script src="js/jquery.easing.js"></script>

    <script type="text/javascript">
        $(function(){
        $('.index .content').css( {'top':'132px', 'bottom':'auto'});
        $('.index li a').hover(
                function(){
                    $(this).find('img').animate({'opacity': '.7'}, 200);        
                    $(this).find('.content').animate({'bottom':'0'}, 150).css({'top':'auto'});      
                }, 
                function(){
                    $(this).find('img').animate({'opacity': '1.0'}, 200);                   
                    $(this).find('.content').animate({'top':'132px'}, 150);
                }       
            );
        });
    </script>

</head>

<body>

    <ul class="index panel">
        <li>
            <a href="#" title="TITLE TEXT.">
                <img src="thumb-1.jpg" alt="ALT TEXT." />
                <div class="content">
                    <h3>Title Here</h3>
                    <p>Other content goes here</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" title="TITLE TEXT.">
                <img src="thumb-1.jpg" alt="ALT TEXT." />
                <div class="content">
                    <h3>Title Here</h3>
                    <p>Other content goes here</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" title="TITLE TEXT.">
                <img src="thumb-1.jpg" alt="ALT TEXT." />
                <div class="content">
                    <h3>Title Here</h3>
                    <p>Other content goes here</p>
                </div>
            </a>
        </li>
    </ul>

</body>

異なるブラウザは、上限値と下限値の両方を使用することを好みません。理想的には、「top」を使用するだけでよいと思います。問題は、「content div」の高さがわからないため、明示的な値を設定できないことです。高さが高い場合は、コンテンツの一部が切り取られます。

アンカーの高さは126ピクセルになることがわかっているので。'content div'の高さを検出するために.height（）を使用しようとしています。次に、この値を126から減算します。これにより、「top」をdiv内に配置するために設定する必要のある値が残ります。

これはもっともらしく聞こえますか、そして私は理にかなっていますか？うまくいけば、これは長くはかからず、できるだけ詳細にしようとしているだけです。

誰かが助けてくれることを願っています、そして私はあなたの返事を楽しみにしています！

4

1 に答える 1

1

デモjsBin

  • SPAN代わりに使用してくださいDIV（DIVはブロックレベルの要素であり、AFAIKはドキュメントを検証しません。）

  • -132...-150...などの初期の下限値を設定できます。.content

    .index li .content {
    background: #f7f7f7;
    bottom: -132px;
    display: block;
    margin: 0;
    padding: 10px 0 3px;
    position: absolute;
    top: 132px;
    width: 224px;
}

jQ：

   $(function(){
    $('.panel li a').hover(
            function(){
                $(this).find('img').animate({'opacity': '.7'}, 200);        
                $(this).find('.content').animate({'bottom':'0'}, 150).css({'top':'auto'});      
            }, 
            function(){
                $(this).find('img').animate({'opacity': '1.0'}, 200);                   
                $(this).find('.content').animate({'bottom':'-132px'}, 150);
            }       
        );
    });

私が使用する他の解決策は、次のとおりです。DOMの準備ができたら、各コンテンツの高さ（var outerH = $(this).outerHeight(true)）を計算し、その値data-heightを各要素のとして設定します。（$(this).data('height', outerH);）。ホバーでアニメートできるよりも、その要素に格納されている正確なN。pxdata-height

于 2012-05-20T16:35:13.847 に答える