Javascript&Jquery why can't my animate() work?

Question

I've written some code, which is shown beneath. I couldn't figure out why hideDialog() can work, but showDialog() doesn't work.Can anybody tell me what wrong is with my code, or give me some information to search? Thanks:)

Here is the error message:

Uncaught TypeError: $(...).showDialog is not a function

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

Try to re frame your code like this,

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'));
          });   
      });
  }

Or read this question to know how to create user defined functions on top of jquery.

Answer 2

use $.fn.showDialog() instead of just function showDialog() . use $.fn.hideDialog() instead of just function hideDialog() . You're trying to extend the jQuery prototype.

Please see What is $.fn.function and Plugins How to Create a Basic Plugin

Answer 3

Try to frame your code like this. Further, read about the difference between this and $(this) in jQuery.

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/