Question

我有一些jquery运行得相当好，但当我将鼠标悬停在有问题的元素上时，底部向下扩展，这不是意料之外的，但不是预期的效果。我希望元素的底部保持静止，元素的顶部向上扩展。

如果您想查看我目前拥有的内容，可以导航至http://demo.ivannovak.com/mobia/

非常感谢任何帮助。

这是我的代码：

HTML

    <div class="button">
        <h3>Product Quality</h3>
        <div>Duis tristique ultricies velit sit amet adipiscing.</div>
        <img src="<?php bloginfo('template_url'); ?>/assets/img/INgravatar_subernova.png" alt="placeholderImage" height="70" />
        <p><a href="#">Learn More &gt;</a></p>
        <div class="bottom"></div>
    </div>

CSS

        div#buttons {}
            div#buttons .button {
                background: url(assets/img/bg_blue_top.jpg) #206094 no-repeat top left;
                padding: 5px 10px 0;
                width: 209px;
                float: left;
                margin-right: 5px;
                position: relative;
                height: 50px;
            }
                div#buttons .button h3 {
                    font-weight: normal;
                    color: #fff;
                    text-transform: uppercase;
                }
                div#buttons .button:hover div,
                div#buttons .button:hover img {
                    /* display: block; */
                }
                div#buttons .button div {
                    width: 120px;
                    padding-right: 20px;
                    float: left;
                    color: #bbb;
                    display: none;
                }
                div#buttons .button img {
                    float: right;
                    display: none;
                }
                div#buttons .button p {
                    position: absolute;
                    bottom: 10px;
                    left: 10px;
                    z-index: 9;
                    font-weight: bold;
                    text-transform: uppercase;
                }
                    div#buttons .button p a {
                        color: #7bc143;
                        text-decoration: none;
                    }
                        div#buttons .button p a:hover {
                            text-decoration: underline;
                        }
                div#buttons .button .bottom {
                    background: url(assets/img/bg_blue_bottom.jpg) no-repeat bottom left;
                    height:26px;
                    position: absolute;
                    display: block;
                    width: 229px;
                    right: 0px;
                    padding:0;
                    bottom: 0;
                }

jQuery

     $(document).ready(function() {
        $('.button').mouseenter(function() {
            $(this).closest('div').animate({
                height: "150px",
            }, 400, "swing");
        });
        $('.button').mouseleave(function() {
            $(this).closest('div').animate({
                height: "50px",
            }, 400, "swing");
        });

     });

Answer 1

要从下到上制作动画，这很容易。尝试将div [按钮]放入另一个div [父div] 您所要做的就是将父容器设置为position：relative，将动画容器设置为position：absolute with BOTTOM：0。它将保留在父DIV的底部。

如何让jQuery向上动画

1 个答案: