Jquery背景動畫

我想在JQuery中使用背景動畫方法，但它只是不起作用。這是我爲它使用的代碼。Jquery背景動畫

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

任何幫助表示讚賞謝謝。

繼承人其餘的。

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

，並在頭：

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

來源

2012-05-28 FabianCook

請出示樣本HTML。 –

請注意，嵌套的「DOM就緒」處理程序中不需要。僅使用第一。 – VisioN

是的，我認爲，只是沒有刪除它。但它似乎並沒有改變這一點。我是否需要額外的用於UI的Jquery文件？ – FabianCook

如果使用jQuery UI庫中的代碼應工作。它具有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背景動畫

回答

相關問題