Question

我正在使用此幻灯片菜单http://www.kerrydean.ca/MATHESON/home2.html

它工作得很好，但是......在第三个标题上，菜单需要比其他标题滑得更远。它们都在ul

之内

<div class="container">
    <ul id="menu">
        <li>
            <a>

                <span class="title">&bull; control valves</span>
                <span class="description">
                    vee ball<br />
                    butterfly control<br />
                    rotary eccentric plug<br />
                    globe<br />
                    severe service and special
                </span>
            </a>
        </li>
         <li>
            <a>

                <span class="title">&bull; saftey relief &amp; rupture discs</span>
                <span class="description">
                    compact<br />
                    high performance<br />
                    API<br />
                    clean service<br />
                    fully lined<br />
                    rupture discs<br />
                </span>
            </a>
        </li>
        <li>
            <a>

                <span class="title">&bull; automated shut off valves</span>
                <span class="description">
                    soft seated ball valves<br />
                    high performance butterfly valves<br />
                    resilient seated butterfly valves<br />
                    metal seated ball valves<br />
                    triple offset vales<br />
                    multi-port ball valves<br />
                    knife gate valves<br />
                    gate and globe valves<br />
                    pneumatic actuators<br />
                    electric actuators<br />
                    hydraulic actuators<br />
                    accessories
                </span>
            </a>
        </li>
         <li>
            <a>

                <span class="title">&bull; manual valves</span>
                <span class="description">
                    Search our website
                </span>
            </a>
        </li>
    </ul>
</div>

这里是css和jquery

.container{
    width:799px;
    height:300px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    z-index: 100;
}
ul#menu{
    list-style:none;
    position:absolute;
    bottom:-25px;
    left:20px;
    font-size:13px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: normal;
    color:#999;
    letter-spacing:-1px;

}
ul#menu li{
    float:left;
    margin:0px 10px 0px 0px;
}
ul#menu a{
    cursor:pointer;
    position:relative;
    float:left;
    bottom:-95px;
    line-height:20px;
    width:150px;
}
ul#menu span.title{
    display:block;
    height:26px;
    color:#B7B7B6;
}
ul#menu span.description{
    width:138px;
    height:120px;
    background-color:#B7B7B6;
    border:1px solid #fff;
    color:#fff;
    display:block;
    font-size:12px;
    padding:10px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: .5px;
}

$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-15px'
                }, 300);
           },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-100px'
                }, 300);
        }
    );
});

提前感谢！

Answer 1

请勿在CSS中指定.description的显式高度或使用min-height。相反，让它正常包裹到它想要的高度。然后，不是引用显式像素动画偏移量，而是获取LI的高度并使用它。

像这样（未经测试）：

$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-15px'
                }, 300);
           },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom': $(this).height() + 'px'
                }, 300);
        }
    );
});

将属性更改为向上滑动div菜单的一部分

1 个答案: