0

6 枚のスライドに基づいて作成した jQuery スライダーがあります。最初は、1 つのスライダー イメージが 50% で開き、他の 5 つのスライダー イメージがコンテナーの幅の 10% で開きます (レスポンシブ サイトになるため)。

次に、jQueryを使用して、ホバーしたアイテムを幅50％に変更し、残りを10％に落とします。問題は、マウスがアイテムの上にホバーすると新しい行に落ちる（100％を超える）ことです。

どうすればこれを停止できますか? スライド間をシームレスに転送し、コンテナ全体を埋める必要があります。私のコードは以下にあり、 jsFiddle リンクを使用して、ここで実際の例を見ることができます。

jQuery

jQuery(".inside").mouseout(function() {  

jQuery('.inside').animate( {width: '10%'}, { duration: 1000, queue: false,  });
jQuery('#one').animate({width: '50%'}, { duration: 1000, queue: false });

});

jQuery(".inside").mouseover(function() { 


jQuery(".inside").animate({width: '10%'}, { duration: 1000, queue: false });
jQuery(this).animate( {width: '50%'}, { duration: 1000, queue: false, });

});

HTML

    <div id="slide-show-holder">

<div id="container">

<div class="inside" id="one"></div>
<div class="inside" id="two"></div>
<div class="inside" id="three"></div>
<div class="inside" id="four"></div>
<div class="inside" id="five"></div>
<div class="inside" id="six"></div>

</div>

</div>

CSS

/* SLIDESHOW STYLES ================================================== */

#container              { width: 100%; height: 300px; cursor: pointer; margin: auto;    }
#container .inside      { width: 10%; display: inline; float: left; height: 330px; position: relative;  }
#container  #one        { background: url('http://stafford.networkintellect4.info/wp-content/themes/stafford/images/business-loans-for-women.jpg'); width: 50%;         }
#container  #two        { background: url('http://stafford.networkintellect4.info/wp-content/themes/stafford/images/business-man-and-woman.jpeg');  }
#container  #three      { background: url('http://stafford.networkintellect4.info/wp-content/themes/stafford/images/303961321.jpeg');   }
#container  #four       { background: url('http://stafford.networkintellect4.info/wp-content/themes/stafford/images/general-business-insurance.jpg');   }
#container  #five       { background: url('http://stafford.networkintellect4.info/wp-content/themes/stafford/images/shutterstock_76925098.jpg');    }
#container  #six        { background: url('http://stafford.networkintellect4.info/wp-content/themes/stafford/images/business-plan.jpg');    }


/* END SLIDESHOW STYLES ================================================== */
4

2 に答える 2

1

私にとって唯一の論理的な説明は、％を使用しているため、アニメーション中のある時点でのすべての幅の合計が100％を超えることです（バグ/機能の丸め）。

コンテナに固定を指定できます。

http://jsfiddle.net/BjyPH/3/

overflow:hiddenまたはコンテナに追加します。ちなみに、その mouseleave 機能は必要ないと思います。これは、mouseenter でのみ実行できます。

jQuery(".inside").mouseover(function() { 
    $(this).stop(true,true).animate({
        width: "50%"
    }, 500);
    $(this).siblings().stop(true,true).animate({
        width: "10%"
    }, 500);
});

http://jsfiddle.net/BjyPH/2/

これはおそらくより良い解決策ですが、アニメーションを使用しているため、最後のスライドにはまだちらつきがあります%(上記を参照)。

編集：またはjQuery 1.7.2を使用できます：D

http://jsfiddle.net/BjyPH/4/

于 2013-05-01T09:19:55.890 に答える
0

これを変更します (変更幅: 90%; in #container )

#container {
    cursor: pointer;
    height: 300px;
    margin: auto;
    width: 90%;
}

私はそれがmozilla Firefoxで解決されているのを見ました

于 2013-05-01T08:57:34.737 に答える