Question

使用jQuery jquery插件和缓动插件。

我有一系列锚点，列表中都是固定的高度和宽度。在每个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和bottom值。理想情况下，我猜我需要使用'顶级'。问题是，我不知道'内容div'会有多高，所以我无法设置一个明确的值，就好像它更高，它会切断一些内容。

因为我知道锚点的高度为126像素。我一直在尝试使用.height（）来检测'content div'的高度。然后从126中减去这个值 - 这将留下我需要设置'top'的值，将它放在div中。

这听起来有道理吗？我有道理吗？希望这不是长篇大论，只是尽量尽可能详细。

希望有人可以提供帮助，我很乐意向您回复！

Answer 1

demo 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);）。您可以悬停动画，悬停存储在该元素px中的data-height的确切 N 。

检测div的高度。然后从126中减去值以设置绝对定位div的“顶部”值

1 个答案:

demo jsBin