jQueryの色のプラグインは、選択可能な要素

Question

によってトリガーされませんでした私は、jQueryの選択ではなく、ボタン -

<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button> 

の色アニメーションのプラグインを起動するために、両方を組み合わせて私の試みを

<div class="toggler"> 
     <div id="effect" class="ui-widget-content ui-corner-all"> 
      <h3 class="ui-widget-header ui-corner-all">Animate</h3> 
      <p> 
       jQuery UI bundles the jQuery Color plugins which provides color animations as well as many utility functions for working with colors. 
      </p> 
     </div> 
    </div> 

<ol id="button"> 
    <li class="ui-widget-content">Item 1</li> 
    <li class="ui-widget-content">Item 2</li> 
    <li class="ui-widget-content">Item 3</li> 
    <li class="ui-widget-content">Item 4</li> 
    <li class="ui-widget-content">Item 5</li> 
    <li class="ui-widget-content">Item 6</li> 
    <li class="ui-widget-content">Item 7</li> 
</ol> 

をelements-使用することができます効果は成功しなかった。

$(function(){ 

    var state = true; 
    $("#button").on("click", function() { 
     if (state) { 
     $("#effect").animate({ 
      backgroundColor: "#aa0000", 
      color: "#fff", 
      width: 500 
     }, 1000); 
     } else { 
     $("#effect").animate({ 
      backgroundColor: "#fff", 
      color: "#000", 
      width: 250 
     }, 1000); 
     } 
     state = !state; 
    }); 

    $('#button').easyAudioEffects({ 
     ogg : "audio/1_matrix.ogg", 
     mp3 : "audio/1_matrix.mp3", 
     eventType: "click" 
    }); 

    $("#button").selectable(); 
}); 

他のクリック可能な要素を使用して、ボタンの代わりにカラーアニメーションのプラグインを使用することはできますか？

は私が重複している

Answer 1

idがここに固有のIDでなければなりません任意の提案（ボタン）を理解するだろう。

<li id="button" class="ui-state-default ui-corner-all" >car 1</li> 
    <li id="button" class="ui-state-default ui-corner-all" >car 2</li> 
    <li id="button" class="ui-state-default ui-corner-all" >car 3</li>