Home/ Questions/Q 7985639
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T11:36:56+00:00

I’m working on a splash page for a website for a client. The idea

  • 0

I’m working on a splash page for a website for a client.

The idea is that the blue bar will grow over the hovered text and the text will change color. I have the basic elements in place, but for some reason the bar behaves very glitchily and won’t stay in place. It seems to be a result of the float, but I can’t see how to get the bar to grow in width to the left otherwise.

here is my jQuery code

    $(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);
});
});

Here is the website 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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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…

    • 0