0

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

我有 3 张图片……每张大约 200 像素宽……当您将鼠标悬停在一张图片上时，有问题的图片会变大，而另外两个会变小。

我已经做到了..这是我的演示

我的代码如下：（您可能会看到它有点草率，但我是 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 正在缩小？

4

2 回答 2

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
于 2013-08-14T09:41:30.753 回答
0

你可以这样做...

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

这个链接也可能有帮助。

干杯！！！

于 2013-08-14T09:33:04.473 回答