Продукт магазина

by Евгений

HTML

<div class="catalog_item_wrap">
    <a class="catalog_item_photo" href="" >
        <img src="http://img-sotmarket.ru/140x200/img/detskie-tovary/detskie-igrushki/avtotreki/skorostnoj-spusk-ss-toys-ek2783r-0.jpg" />
    </a>
    <div class="catalog_item_box">
        <a href="" class="catalog_item_name">JAKKS Pacific Железная дорога PowerTrains 48628</a>
        <div class="catalog_item_availability">Наличие: под заказ</div>
        <div class="catalog_item_waranty">Гарантия: 2 недели</div>
        <div class="catalog_item_price">3 350 руб</div>
    </div>
</div>

CSS

.catalog_item_wrap {
    width: 220px;
    height: 300px;
    overflow: hidden;
    border: 2px solid #ccc;
    border-radius: 5px;
    position: relative;
    font: 13px/18px Arial,Helvetica,sans-serif;
    color: #333;
}
.catalog_item_wrap:hover {
    border: 2px solid blue;
}
.catalog_item_photo {
    display: block;
    margin: 0 auto;
}
.catalog_item_photo img {
    display: block;
    margin: 0 auto;
}
.catalog_item_name {
    display: block;
    text-decoration: none;
    color: #000;
    font-size: 18px;
    line-height: 22px;
    word-wrap: break-word;
    max-height: 44px;
    min-height: 44px;
    overflow: hidden;
    margin-bottom: 10px;
}
.catalog_item_name:hover {
    color: #333;
}
.catalog_item_box {
    padding: 10px;
    border-top: 1px solid #ccc;
    min-height: 100%;
    position: absolute;
    left: 0;
    top: 150px;
    background: #fff;
}
.catalog_item_price {
    margin-top: 10px;
    color: #000;
    font-size: 16px;
}

JavaScript

var productNameHeight = 44;// высота заголовка продукта в пикселях
var productNameOffset = 150;// отступ заголовка продукта от верха блока в пикселях
;$(function() {
    $('.catalog_item_photo').mouseenter(function() {
        $(this).parents('.catalog_item_wrap').find('.catalog_item_box').stop().animate({top: $(this).height()}, 200);
    }).mouseleave(function() {
        $(this).parents('.catalog_item_wrap').find('.catalog_item_box').stop().animate({top: productNameOffset}, 200);
    });
    $('.catalog_item_box').mouseenter(function() {
        var el = $(this).find('.catalog_item_name');
        var maxH = el.css('max-height', 'none').height();
        var delta = productNameHeight - maxH;
        el.height(productNameHeight).stop().animate({height: maxH}, 200);
        $(this).stop().animate({top: productNameOffset + delta}, 200);
    }).mouseleave(function() {
        var el = $(this).find('.catalog_item_name');
        var delta = el.height() - productNameHeight;
        el.stop().animate({height: productNameHeight}, 200, function() {
            el.css('max-height', productNameHeight).height('auto');
        });
        $(this).stop().animate({top: productNameOffset}, 200);
    });
})