jquery動畫屬性不能用於我的首選CSS樣式

我正在製作一個小型視頻遊戲，我希望頭像圖片發光爲紅色，就像從NPC中受到傷害一樣。爲了做到這一點，我試圖在我的播放器上設置一個紅色的shadowBox動畫，但它不起作用。有人能幫我弄清楚我的東西特別錯了嗎？我嘗試使用.css，但它不動畫。它只是馬上改變它。jquery動畫屬性不能用於我的首選CSS樣式

$(document).ready(function() { 
    $('#usercontainer').click(function() { 
     $(this).animate({ 
     boxShadow: '10px 10px 10px red' 
     },'slow'); 
    }); 
});

額外的CSS + HTML

#usercontainer { 
     float: left; 
     border: 1px solid; 
     background-color: rgb(255,255,255); 
     height: 200px; 
     width: 200px; 
     overflow: hidden; 
     } 

     #userimage { 
      background-color: rgb(0,255,255); 
      height: 200px; 
      width: 200px; 
      } 



<div id="usercontainer"> 
    <div id="userimage"> 
     <img src="images/wingedwarrior.jpg" alt="warrior" style="width:200px; height:200px"> 
      <div id="userHitSplat"> </div> 
    </div> <!--END OF USER IMAGE--> 
</div><!--END OF USER CONTAINER-->

來源

2015-03-25 Shawn

你會考慮使用jQuery UI高亮效果嗎？ http://api.jqueryui.com/highlight-effect/ – atomCode 2015-03-25 02:48:31

這可能是與CSS動畫更容易：

#usercontainer { 
     float: left; 
     border: 1px solid; 
     background-color: rgb(255,255,255); 
     height: 200px; 
     width: 200px; 
     overflow: hidden; 
     transition: 1s; 
     } 
#usercontainer.glow { 
     box-shadow: 10px 10px 10px red; 
} 

     #userimage { 
      background-color: rgb(0,255,255); 
      height: 200px; 
      width: 200px; 
      }

然後動畫：

$(document).ready(function() { 
    $('#usercontainer').click(function() { 
     $(this).addClass('glow'); 
    }); 
});

究其原因，JS動畫不工作的是，jquery不能動畫顏色。 Jquery-ui包含了這樣做的能力，但是當你可以使用css動畫代替時，它可能不適用於此。

Demo

來源

2015-03-25 02:53:50

我試過這種方法，但沒有奏效。 – Shawn 2015-03-25 03:04:49

jquery動畫屬性不能用於我的首選CSS樣式

回答

相關問題