0

私はクライアントのウェブサイトのスプラッシュページに取り組んでいます。

アイデアは、青いバーがホバーされたテキストの上に成長し、テキストの色が変わるというものです。基本的な要素は整っていますが、何らかの理由でバーが非常にグリッチに動作し、所定の位置に留まりません。フロートのせいかもしれませんが、それ以外の方法でバーの幅を左に伸ばす方法がわかりません。

これが私のjQueryコードです

    $(document).ready(function(e) {
$('.work_link').hover(
function () {
    $('.work_link').stop(true,false).animate({color:'#ffffff'}, 500);
        $('#splash_bar_mono').stop(true, false).animate({width:'350px'}, 500).css({'float':'right'});
        //mouseover
},
function () {
$('.work_link').stop(true, false).animate({color:'#000'}, 500);
$('#splash_bar_mono').stop(true, false).animate({width:'10px'}, 500);//mouseout
});
$('.play_link').hover(
function () {
    $('.play_link').stop(true, false).animate({color:'#ffffff'}, 500);
    $('#splash_bar_mono').animate({width:'325px'}, 500).css({'float':'left'});//mouseover
},
function () {
    $('.play_link').stop(true, false).animate({color:'#000'}, 500);//mouseout
    $('#splash_bar_mono').stop(true, false).animate({width:'10px'}, 500);
});
});

これがウェブサイトのHTMLです

   <body id="splash">
<div id="splash_center">
        <div style="z-index:200;" id="splash_work"><a  style="z-index:200;" class="work_link" href="#">WORK</a></div>
        <div style="z-index:200;"id="splash_play"><a style="z-index:200;" class="play_link" href="#">PLAY</a></div>
    <div id="splash_bars">
        <div style="z-index:-200;" id="splash_bar_mono"></div>          
    </div>

</div>
  <div id="splash_graphic"></div>


</body>      
</html>

http://fefifofilms.com/

4

1 に答える 1

1

問題が発生する主な理由は、他のdivを使用してその下をスライドすることです。これにより、スライドが下にあるときにホバーメソッドが切り替えられます。

少し異なるアプローチを使用してこれを修正することができました。背景色で別のバーをアニメーション化する代わりに。私はsplash_workとsplash_playで背景グラデーションを使用することを選択しました。

これが例のあるjsFiddleです。

http://jsfiddle.net/9H4JU/

また、私が使用したグラデーションはhttp://sexyselect.net/blog/image.axd?picture=2012%2f5%2fgrad.pngからダウンロードできます。

これがどのように役立つか...

于 2012-05-18T06:52:53.663 に答える