У меня довольно неплохо работает 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 ></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");
});
});