Question

我在图片库中使用jQuery悬停效果。图像的默认大小为265 x 172.它们是水平显示的。我希望当用户将鼠标悬停在图像上时，它会将其换成另一张图像，该图像的大小为449 x 223.它需要看起来像图像微妙变化并且尺寸增大。

此刻我有这个。当我悬停时，我可以看到默认图像向下滑动，较大的图像向上滑动。我不希望用户看到转换，而只是增加尺寸。

的jQuery

        jQuery('.carousel-img').hover(function() {
            jQuery(this).css('width', '449px');
            jQuery(this).children('.defaultImg').stop().hide("fast"); 
            jQuery(this).children('.largeImg').stop().show("slow");

         }, function() {
             jQuery(this).css('width', '265px');
             jQuery(this).children('.largeImg').stop().hide("fast");
             jQuery(this).children('.defaultImg').stop().show("slow");

        });

HTML

<ul id="carousel">
    <li class="carousel-img" style="width: 265px;">
        <img class="defaultImg" src="design-engine-blue.jpg " style="display: inline-block; height: 172px; padding: 0px; margin: 0px; width: 265px; opacity: 1;">
        <img class="largeImg" src="design-engine.jpg" style="display: none; height: 223px; padding: 0px; margin: 0px; width: 449px; opacity: 1;">
    </li>
    <li class="carousel-img" style="width: 265px;">
        <img class="defaultImg" src="design-engine-blue.jpg " style="display: inline-block; height: 172px; padding: 0px; margin: 0px; width: 265px; opacity: 1;">
        <img class="largeImg" src="design-engine.jpg" style="display: none; height: 223px; padding: 0px; margin: 0px; width: 449px; opacity: 1;">
    </li>
</ul>

CSS

#carousel {
    color: #FFFFFF;
    list-style: none outside none;
    margin: 0 auto;
    max-width: 980px;
    text-transform: uppercase;
}

#carousel li {
    float: left;
    height: 223px;
    line-height: 1.7em;
    position: relative;
    width: 265px;
}

#carousel li img {
    bottom: 0;
    left: 0;
    position: absolute;
    vertical-align: bottom;
}

Answer 1

尝试

HTML

<ul id="carousel">
    <li class="carousel-img" style="width: 265px;">
        <img class="defaultImg" src="design-engine-blue.jpg " style="display: inline-block; padding: 0px; margin: 0px; width: 265px; opacity: 1;" />
    </li>
    <li class="carousel-img" style="width: 265px;">
        <img class="defaultImg" src="design-engine-blue.jpg " style="display: inline-block;  padding: 0px; margin: 0px; width: 265px; opacity: 1;" />

    </li>
</ul>

CSS

#carousel {
    color: #FFFFFF;
    list-style: none outside none;
    margin: 0 auto;
    max-width: 980px;
    text-transform: uppercase;
}

#carousel li {
    float: left;
    position: relative;
    width: 265px;
}

#carousel li img {
    bottom: 0;
    left: 0;
    position: relative;
    vertical-align: bottom;
}

JS

$(function () {
    $('.carousel-img').hover(function () {
        $("img", this).eq(0).animate({
            width: "449"
        }, 1000);
    }, function () {
        $("img", this).eq(0).animate({
            width: "265"
        }, 1000);
    });
});

jsfiddle http://jsfiddle.net/guest271314/5GEhU/

jQuery Image从小到大的交换

1 个答案: