Question

我可以使用jQuery Selectable元素 -

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

触发Color Animation插件而不是按钮 -

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

我尝试将两种效果结合起来并不成功。

$(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();
});

是否可以使用其他可点击元素使Color Animation插件工作，而不是按钮？

我将不胜感激任何建议

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>

jQuery Color插件没有被Selectable元素触发

1 个答案: