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

The main reason why you are having issues is by using the other div to slide underneath of it. That is causing your hover methods to be toggled while the slide is underneath.

I have been able to fix this using a slightly different approach. Instead of animating a different bar with a background color. I have opted to using a background gradient on the splash_work and splash_play.

Here is the jsFiddle with an example.

http://jsfiddle.net/9H4JU/

Also you can download the gradient i used from http://sexyselect.net/blog/image.axd?picture=2012%2f5%2fgrad.png

How this helps...

于 2012-05-18T06:52:53.663 回答