Question

我正在为客户的网站制作启动页面。

这个想法是蓝色条会在悬停的文本上生长，文本会改变颜色。我有基本的元素，但由于某种原因，酒吧表现得很脆弱，不会留在原地。它似乎是浮动的结果，但我看不出如何使条形宽度向左增长。

这是我的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/

Answer 1

你遇到问题的主要原因是使用另一个div来滑动它。这会导致您的悬停方法在幻灯片位于下方时切换。

我已经能够使用稍微不同的方法解决这个问题。而不是使用背景颜色设置不同的动画。我选择在splash_work和splash_play上使用背景渐变。

这是jsFiddle的一个例子。

http://jsfiddle.net/9H4JU/

您也可以从http://sexyselect.net/blog/image.axd?picture=2012%2f5%2fgrad.png

下载我使用的渐变

这有助于......

jQuery div宽度动画不能平滑动画

1 个答案: