jQuery div width 애니메이션이 부드럽게 움직이지 않습니다.

클라이언트 용 웹 사이트의 시작 페이지에서 작업하고 있습니다.jQuery div width 애니메이션이 부드럽게 움직이지 않습니다.

아이디어는 파란 막대가 맴돌 았던 텍스트 위에서 자라며 텍스트의 색이 바뀌는 것입니다. 나는 기본 요소를 가지고 있지만, 어떤 이유로 bar는 매우 이상하게 행동하고 그 자리에 머 무르지 않을 것입니다. 그것은 플로트의 결과 인 것으로 보이지만 그렇지 않으면 왼쪽으로 너비가 늘어나는 방법을 볼 수 없습니다. 여기

여기 내 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); 
}); 
});

입니다

<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/

출처

2012-05-18 ScottyC

당신은 문제가있는 주된 이유는 아래 슬라이드 다른 사업부를 사용하는 것입니다 웹 사이트의 HTML을하다 그것의. 슬라이드가 아래에있을 때 호버 메소드가 토글됩니다.

나는 약간 다른 접근법을 사용하여이 문제를 해결할 수있었습니다. 배경색으로 다른 막대를 애니메이션으로 만드는 대신. splash_work 및 splash_play에서 배경 그라디언트를 사용하기로했습니다.

예를 들어 jsFiddle이 있습니다.

http://jsfiddle.net/9H4JU/

또한 내가 http://sexyselect.net/blog/image.axd?picture=2012%2f5%2fgrad.png이 도움이 어떻게

에서 사용되는 그라데이션 ...

출처

2012-05-18 06:52:53 Nico

와우 많이 부드러워을 다운로드 할 수 있습니다. 나는 그것이 훨씬 더 좋고 간단한 해결책이라고 생각한다. 나는 당신이 그런 배경의 배경을 움직일 수 있다는 것을 몰랐습니다. 천재. – ScottyC

위대한 일을했지만 파이어 폭스에서 깨졌습니다. 파이어 폭스와 관련이 있다고 생각합니다. background-position-x 기능을 지원하지 않습니다. 이견있는 사람? – ScottyC

jQuery div width 애니메이션이 부드럽게 움직이지 않습니다.

답변

관련 문제