用于一次收缩和扩展多个框的 Jquery 框动画

Question

我有一个想要实现的想法，我已经完成了一半，但现在我有点卡住了，需要一些帮助。

我有 3 张图片.. 每张大约 200 像素宽...当您将鼠标悬停在一张图片上时，相关图片会变大，而其他两张会变小。

我已经成功了 .. 这是我的demo

我的代码如下：（您可能会看到它有点草率，但我是 jquery 的新手。

<style type="text/css">

body,
html {
    margin: 0px;
    padding: 0px;
}
#outerbox1,
#outerbox2,
#outerbox3 {
    background-color:#000;
    width: 200px;
    padding: 10px 5px;
    float: left;
}
#box1,
#box2,
#box3 {
    width: 100%;
    height: 180px;
    background-position:center;
    background-repeat:no-repeat;
}
#box1 {
    background-image:url(mqdefault1.jpg);
}
#box2 {
    background-image:url(mqdefault2.jpg);
}
#box3 {
    background-image:url(mqdefault3.jpg);
}
</style>


<div id="outerbox1">
<div id="box1">

</div>
</div>

<div id="outerbox2">
<div id="box2">

</div>
</div>

<div id="outerbox3">
<div id="box3">

</div>
</div>
<script>
$("#outerbox1").hover(function(){
    $(this).animate({ width: "320px" });
    $("#outerbox2").animate({ width: "140px" });
    $("#outerbox3").animate({ width: "140px" });
}, function() {
    $(this).animate({ width: "200px" });
    $("#outerbox2").animate({ width: "200px" });
    $("#outerbox3").animate({ width: "200px" });
});

$("#outerbox2").hover(function(){
    $(this).animate({ width: "320px" });
    $("#outerbox1").animate({ width: "140px" });
    $("#outerbox3").animate({ width: "140px" });
}, function() {
    $(this).animate({ width: "200px" });
    $("#outerbox1").animate({ width: "200px" });
    $("#outerbox3").animate({ width: "200px" });
});

$("#outerbox3").hover(function(){
    $(this).animate({ width: "320px" });
    $("#outerbox1").animate({ width: "140px" });
    $("#outerbox2").animate({ width: "140px" });
}, function() {
    $(this).animate({ width: "200px" });
    $("#outerbox1").animate({ width: "200px" });
    $("#outerbox2").animate({ width: "200px" });
});
</script>

所以我的问题是，如果我将鼠标悬停在框 1 上……然后是框 2。我必须等待框 1 缩小，然后框 2 开始展开。

我将如何让盒子 2 开始膨胀而盒子 1 缩小？

Answer 1

问题是由每个框上的 mouseleave/handlerOut 触发引起的。如果您将您的盒子包装在一个容器中并且只在其上处理鼠标离开，您应该会得到您想要的行为。

小提琴：http://jsfiddle.net/chucknelson/FQ5ae/

HTML

<div id="container">
    <div id="outerbox1">
        <div id="box1">  

        </div>
    </div>
    ...and so on
</div>

Javascript

$("#container").hover(function() {
    //nothing for handlerIn
}, function() {
    $("#outerbox1").animate({ width: "200px" });
    $("#outerbox2").animate({ width: "200px" });
    $("#outerbox3").animate({ width: "200px" });
});

$("#outerbox1").hover(function(){
    $(this).animate({ width: "320px" });
    $("#outerbox2").animate({ width: "140px" });
    $("#outerbox3").animate({ width: "140px" });
}, function() {  
    //nothing for handlerOut
});
...and so on

Answer 2

你可以这样做...

$("#outerbox1").stop().hover(function(){...
$("#outerbox2").stop().hover(function(){...
$("#outerbox2").stop().hover(function(){...

这个link 也可能有帮助。

干杯！！！