Jquery 배경 애니메이션

JQuery에서 배경 애니메이트 메서드를 사용하려고하지만 작동하지 않습니다. 여기에 내가 사용하고있는 코드가 있습니다.Jquery 배경 애니메이션

$(".menu_item").mouseenter(function(){$(this).animate({backgroundColor: "#FF8040"}, 'fast');}); 
$(".menu_item").mouseleave(function(){$(this).animate({backgroundColor: "#999"}, 'fast');});

감사합니다. 감사드립니다.

Heres 나머지 부분.

다음은 메뉴에 대한 HTML :

<div id="menu"> 
    <a href="index.html" id="home_menu" class="menu_item">Home</a> 
    <a href="index.html" class="menu_item">Tutorials</a> 
    <a href="index.html" class="menu_item">News</a> 
</div>

하고 스크립트가 :

<script type="text/javascript"> 
    $(document).ready(function(){ 

     jQuery().ready(function(){ 
      $(".menu_item").mouseenter(function(){$(this).animate({backgroundColor: "#FF8040"}, 'fast');}); 
      $(".menu_item").mouseleave(function(){$(this).animate({backgroundColor: "#999"}, 'fast');}); 

      var pos = $("#fixed_head").position(); 
      var height = $("#fixed_head").height(); 
      var height2 = $("#menu").height(); 

      var screenHeight = $("body").height(); 
      var newHeight = screenHeight - height - height2; 
      $("#container").css("top", (pos.top + height)); 
      $("#container").css("height", newHeight); 
      $("#content").css("height", newHeight); 

      $(window).resize(function() { 
       var pos = $("#fixed_head").position(); 
       var height = $("#fixed_head").height(); 
       var height2 = $("#menu").height(); 

       var screenHeight = $("body").height(); 
       var newHeight = screenHeight - height - height2; 
       $("#container").css("top", (pos.top + height)); 
       $("#container").css("height", newHeight); 
       $("#content").css("height", newHeight); 
      }); 

     }); 

    }); 
    </script>

과 머리에

: 당신이 jQuery UI 라이브러리를 사용하는 경우

<script type="text/javascript" src="jquery.js"></script>

출처

2012-05-28 FabianCook

샘플 HTML을 제시해주십시오. –

주의해서, 중첩 된 DOM 준비 핸들러는 필요 없습니다. 처음에만 사용하십시오. – VisioN

그래, 내가 그걸 알아 냈어, 그냥 그것을 제거하지 않았다. 그러나 이것에 변화를주는 것처럼 보이지는 않습니다. UI 용으로 추가 Jquery 파일이 필요합니까? – FabianCook

은 당신의 코드가 작동합니다. animate 방법에 대한 색상 전환 효과가 있습니다.

는 또 다른 방법은 쓰기에는 다음과 같습니다

$(".menu_item").hover(function() { 
    $(this).animate({ 
     backgroundColor: "#FF8040" 
    }, 'fast'); 
}, function() { 
    $(this).animate({ 
     backgroundColor: "#999" 
    }, 'fast'); 
});

DEMO :http://jsfiddle.net/kbKdY/

출처

2012-05-28 21:31:15 VisioN

그래, 내가 그럴지도 모른다고 생각 했어. 그 도서관에 있던 물건을 사용하지 않았기 때문에 나는 몰랐다. 고마워. – FabianCook

음, 귀하의 질문에 직접 대답은 아니지만, 왜 CSS 전환 사용하지 않는?

여전히 jQuery를 사용하여 마우스 이벤트에 클래스를 추가/제거 할 수 있습니다.

CSS 전환은 빠르며 (JS 애니메이션보다 빠름) 매우 안정적입니다. 브라우저가 CSS 전환을 지원하지 않으면 배경색이 변경되지만 (애니메이션/전환이 없음) 승/승 상황입니다. 여기

샘플 코드 : http://jsfiddle.net/GuSQx/

출처

2012-05-28 21:35:26 strah

어떻게 하시겠습니까? 샘플 코드? – FabianCook

위의 코드를 참조하십시오. – strah

난 당신이 머리 부분에 jQuery UI 1.8.18 파일을 누락 생각합니다. 예를 들어

이

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

출처

2012-05-28 21:39:03 arttronics

Jquery 배경 애니메이션

답변

관련 문제