Jquery工具提示动画

Question

我必须选择样式从下拉菜单和工具提示应该动画选择的方式。但我的工具提示总是一样的。在表演中有什么问题吗?或者我无法得到正确的风格价值。我应该使用change()函数吗？

http://jsfiddle.net/2n5k6kwn/1/

 <script>
  $(function() {
        var value=$( "#effect" ).val();
    $( document ).tooltip({
      show: {
        effect: value,
        delay: 50
      },
      position: {
        my: "center bottom-20",
        at: "left top",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
      }
       });
  });
  </script>

</head>
<body >


 <div style="width:400px; margin:100px auto;">
 <select id="effect">
 <option value="blind">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fade">Fade</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="shake">Shake</option>
  <option value="size">Size</option>
  <option value="slide">Slide</option>
  <option value="transfer">Transfer</option>
  <option value="myAnimation">My animation</option>
  </select>
  <br/><br/>
 <div style="width:100px">Име:</div><input id="ime" class="tooltip" name="ime" style="width:200px" title="Име"/>

 </div> 

Answer 1

这工作..。请参阅http://jsfiddle.net/alemarch/2n5k6kwn/2/

  $(function() {
     $("#effect").change(function(){
        $( document ).tooltip({
          show: {
            effect: $( "#effect" ).val(),
            delay: 50
          },
          position: {
            my: "center bottom-20",
            at: "left top",
            using: function( position, feedback ) {
              $( this ).css( position );
              $( "<div>" )
                .addClass( "arrow" )
                .addClass( feedback.vertical )
                .addClass( feedback.horizontal )
                .appendTo( this );
            }
          }
        })
     })
  });

Answer 2

您正在选择页面加载上的值。然后，将页面加载中使用的值设置为每次使用的工具提示。

通过在文档级别注册事件，您还可以同时更改页面的所有工具提示。

将代码更改为以下代码以使其以正确的方式运行：

$( '#ime' ).tooltip({
  show: {
    effect: $( "#effect" ).val(),
    delay: 50
  },
  position: {
    my: "center bottom-20",
    at: "left top",
    using: function( position, feedback ) {
      $( this ).css( position );
      $( "<div>" )
        .addClass( "arrow" )
        .addClass( feedback.vertical )
        .addClass( feedback.horizontal )
        .appendTo( this );
    }
  }
   });

})；

更好的做法是，每次下拉框发生变化时，都更改变量“value”的值。每次出现工具提示时，THen jquery都不必查找该值。