0

実現したいアイデアがあり、半分はやり終えましたが、今は少し行き詰まっており、助けが必要です。

私は3つの画像を持っています..それぞれ約200px幅です...画像の上にカーソルを置くと、問題の画像が大きくなり、他の2つが小さくなります.

私はこれを管理しました..これが私のデモです

私のコードは次のとおりです: (少しずさんに見えるかもしれませんが、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 に移動した場合です。ボックス 2 が拡大し始める前に、ボックス 1 が縮小するのを待つ必要があります。

ボックス1が縮小している間にボックス2が拡大し始めるようにするにはどうすればよいですか?

4

2 に答える 2

1

問題は、これらのボックスのそれぞれで発生する mouseleave/handlerOut によって引き起こされています。ボックスを 1 つのコンテナーにラップし、そのコンテナーでのみ mouseleave を処理すると、必要な動作が得られるはずです。

フィドル: 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 に答える