Javascript&Jquery 为什么我的 animate() 不能工作？

Question

我写了一些代码，如下所示。 我不明白为什么 hideDialog() 可以工作，但 showDialog() 不起作用。谁能告诉我我的代码有什么问题，或者给我一些信息来搜索？ 谢谢：）

这是错误消息：

未捕获的类型错误：$(...).showDialog 不是函数

function showDialog(){
      this.animate({
          top:50
      },{ 
          duration:400,
          effect:'slide',
          easing:'easeOutBack'
      }); 
  }

  function hideDialog(){
      this.animate({
          top:-200
      },{ 
          duration:400,
          effect:'slide',
          easing:'easeInBack'
      });
  }

  function initSetting(){
      $('.form-control').change(function(){
          $('#myAlertDialog').showDialog();
          $('#myAlertDialog').find('btnOk').on('click',function(){
              $('#myAlertDialog').hideDialog();
          });   
      });
  }

Answer 1

尝试像这样重新构建您的代码，

function showDialog($this){
      $this.animate({
          top:50
      },{ 
          duration:400,
          effect:'slide',
          easing:'easeOutBack'
      }); 
 }

  function hideDialog($this){
      $this.animate({
          top:-200
      },{ 
          duration:400,
          effect:'slide',
          easing:'easeInBack'
      });
  }

  function initSetting(){
      $('.form-control').change(function(){
          showDialog($('#myAlertDialog'));
          $('#myAlertDialog').find('btnOk').on('click',function(){
              hideDialog($('#myAlertDialog'));
          });   
      });
  }

或阅读此问题以了解如何在 jquery 之上创建用户定义的函数。

Answer 2

使用$.fn.showDialog()而不是function showDialog() 。 使用$.fn.hideDialog()而不是function hideDialog() 。 您正在尝试扩展 jQuery 原型。

请参阅什么是 $.fn.function和Plugins 如何创建基本插件

Answer 3

尝试像这样构建您的代码。 此外，阅读 jQuery 中 this 和 $(this) 之间的区别。

function showDialog(item){
      $(item).animate({
          top:50,
          duration:400,
          effect:'slide',
          easing:'easeOutBack'
      }); 
 }   // end of showDialog

  function hideDialog(item){
      $(item).animate({
          top:-200,
          duration:400,
          effect:'slide',
          easing:'easeInBack'
      });
  }   // end of hideDialog

  function initSetting(){
      $('.form-control').change(function(){
          showDialog($('#myAlertDialog'));
          $('#myAlertDialog').find('btnOk').on('click',function(){
              hideDialog($('#myAlertDialog'));
          });   
      });
  }

  // btnOK should have a # or . for the identifier.
  // if the click event does not work, then try with the delegate() function. http://api.jquery.com/delegate/