jQuery:悬停时更改图像宽度

jQuery: Change Image Width on Hover

本文关键字：图像 悬停 jQuery      更新时间：2023-09-26

我有两个并排的图像。当用户将鼠标悬停在图像上时，它应该会展开。

.HTML：

<a href="#"><div id="skinny"></div></a>
<a href="#"><div id="room9"></div></a>

j查询：

$('#skinny').hover(function() {
    $(this).animate({width: '220px'}, 'fast');
    $('#room9').animate({width: '80px'}, 'fast');
}, function() {
    $(this).animate({width:'150px'},'fast');
    $('#room9').animate({width: '150px'}, 'fast');
});

js小提琴：http://jsfiddle.net/G4q4q/

它"适用于"左侧图像，但我无法让它与右侧图像一起使用。我目前的方法效率低下，所以如果您有任何优化建议，请告诉我。

好吧，我做了一个非常粗糙的例子，不允许扩展/多个图像，但你应该明白这个想法。要在 CSS 中clip元素，只需overflow: hidden

js小提琴：http://jsfiddle.net/G4q4q/10/

.HTML

<div id="wrap">
    <a href="#" id="skinny">
        <img class="image" src="http://www.theexoticvet.com/images/content_1.jpg" />
    </a>
    <a href="#" id="room9">
        <img class="image" src="http://www.theexoticvet.com/images/content_2.jpg" />
    </a>
</div>​

.CSS 

#wrap {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
a {
    display: block;
    float: left;
    top: 0;
    width: 50%;
    height: 300px;
    overflow: hidden;
}

爪哇语

$(function() {
    $('a').hover(function() {
        $(this).stop().animate({width: '80%'}, 'fast')
        $('a').not(this).stop().animate({width: '20%'}, 'fast');
    }, function() {
        $('a').stop().animate({width:'50%'},'fast');
    });
});

编辑笔记：我编辑了这个，让它比我第一次尝试好一点。

我花了很多时间为此制作了一个更通用的方法 - 所以无论你是否使用它，至少都要看看这个。我知道克里斯蒂安会因为重新发明轮子而诅咒我，但是，我仍然在他写评论之前很久就开始了......顺便问一下，你想了解这些东西是如何工作的吗？为此，我在这里创建了这个插件(克里斯蒂安现在的我(：http://jsfiddle.net/hHzkS/

我已经评论过了...如果有任何疑问，请在评论中询问...

相关文章：