如何让jQuery向上动画 [英] How to make jQuery animate upwards

问题描述

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

如果你想看看我现在有什么，你可以导航到 http://demo.ivannovak.com/mobia/

任何帮助将不胜感激。

以下是我的代码：

HTML

 < div class =button> 
< h3>产品质量< / h3> 
< div> Duis tristique ultricies velit sit amet adipiscing。< / div> 
< img src =<？php bloginfo（'template_url'）;？> /assets/img/INgravatar_subernova.pngalt =placeholderImageheight =70/> 
< p>< a href =＃>了解详情& gt;< / a>< / p> 
< div class =bottom>< / div> 
< / div> 
  

CSS

  div＃按钮{} 
 div＃buttons .button {
 background：url（assets / img / bg_blue_top.jpg）＃206094不重复左上; 
 padding：5px 10px 0; 
 width：209px; 
 float：left; 
 margin-right：5px; 
职位：亲属; 
 height：50px; 
} 
 div＃buttons .button h3 {
 font-weight：normal; 
颜色：#fff; 
 text-transform：大写; 
} 
 div＃buttons .button：hover div，
 div＃buttons .button：hover img {
 / * display：block; * / 
} 
 div＃buttons .button div {
 width：120px; 
 padding-right：20px; 
 float：left; 
颜色：#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：大写; 
} 
 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 left left; 
 height：26px; 
位置：绝对; 
 display：block; 
 width：229px; 
 right：0px; 
 padding：0; 
 bottom：0; 
 
  

jQuery $（this）.closest（'div'）。animate（{
height：150px，
}，400，swing）;
}）;
$（'。button'）。mouseleave（function（）{
$（this）.closest（'div'）。animate（{
height：50px，
}，400，swing）;
}）;

}）;

解决方案

要从底部到顶部进行动画处理，这非常简单。
尝试将div [按钮]放入另一个div [父div]
您只需将父容器设置为position：relative并将动画容器设置为absolute：BOTTOM：0 。
它将停留在父DIV的底部。

I've got some jquery running fairly well, howeever when I hover over the element in question, the bottom expands downward which is not unexpected but is not the desired effect. I'd like the bottom of the element to remain stationary with the top of the element expanding upwards.

If you'd like to see what I currently have, you may navigate to http://demo.ivannovak.com/mobia/

Any help would be greatly appreciated.

Here is my code:

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");
        });

     });

解决方案

To animate from bottom to top, this is quite easy. Try putting the div[button] in to another div[a parent div] All you have to do is set the parent container to position: relative and the animated container to position: absolute with BOTTOM: 0. It'll stay at the bottom of the parent DIV.

这篇关于如何让jQuery向上动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！