html - 将鼠标悬停拇指效果从缩小更改为放大

Question

不久前我在网上找到了鼠标悬停效果，但我想稍微改变一下。目前它在鼠标悬停时缩小，但我希望它放大。所以默认状态是缩略图的实际尺寸，然后鼠标悬停会以缩略图当前缩小的方式放大缩略图。

这是 JSfiddle 上的 CSS/HTML 代码:http://jsfiddle.net/k9TbE/5/

HTML:

<div class="thumbs"> <a href="project.html">
        <span class="thumbInfo">Client Name<h4>Project Name</h4></span>
        <img class="lazy" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPEOsFC2tci90_yQTxEfD5gXWOBzI3Rz2wIchkmm2VdNBN57RttD4kiUk" alt="" />
    </a>

</div>

CSS:

.thumbs {
    width: 219px;
    height: 170px;
    margin: 0px 10px 10px 0;
    overflow: hidden;
    position: relative;
    float: left;
}
.no-margin {
    margin-right: 0;
}
.thumbs a {
    display: block;
    position: relative;
}
.thumbs a img {
    width: 250px;
    height: 200px;
    top: -10px;
    left: -20px;
    position: relative;
}
.thumbs a span {
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    font-family:'EurostileLT-Demi', Verdana;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0px;
    padding-top: 65px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    z-index: 100;
    display: none;
}
.thumbs a span h4 {
    font-family:'EurostileLT', Verdana;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 1px;
    line-height: 18px;
    margin: 0;
}

Javascript:

$(document).ready(function () {
    $('.thumbs').mouseenter(function (e) {
        $(this).children('a').children('img').animate({
            height: '170',
            left: '0',
            top: '0',
            width: '219'
        }, 100);
        $(this).children('a').children('span').fadeIn(200);
    }).mouseleave(function (e) {
        $(this).children('a').children('img').animate({
            height: '200',
            left: '-20',
            top: '-10',
            width: '250'
        }, 100);
        $(this).children('a').children('span').fadeOut(200);
    });
});

谁能帮帮我？ :-)我真的很感激。

Answer 1

试试这个:

CSS:

.thumbs a img {
    width: 219px;
    height: 170px;
    position: relative;
}

Javascript:

$(document).ready(function () {
    $('.thumbs').mouseenter(function (e) {
        $(this).children('a').children('img').animate({
            height: '200', // Changed this part
            left: '-20',   // *
            top: '-10',    // *
            width: '250'   // *
        }, 100);
        $(this).children('a').children('span').fadeIn(200);
    }).mouseleave(function (e) {
        $(this).children('a').children('img').animate({
            height: '170', // With this part
            left: '0',     // *
            top: '0',      // *
            width: '219'   // *
        }, 100);
        $(this).children('a').children('span').fadeOut(200);
    });
});

我所做的是:我更改了默认值 CSS <img> 的设置在开始时缩小并更改 Javascript所以它在 mouseenter 上放大而不是缩小并在 mouseleave 上缩小而不是放大.

JS fiddle :http://jsfiddle.net/k9TbE/6/