Question

I have the below code that is animating a div (#feedback-form-container) to slide in and out and when clicked it jumps to the center of the screen and then these slide animations are turned off. Once the form in the div is submitted and the form goes back to where it was I want to turn these animations back on again however this is not working. I am trying to use on() for this without success. Can anybody spot the problem? I’m stumped.

/////////////////////feedback form animation//////////////////////
jQuery(document).ready(function($) {
  //find center of screen
  var $screenwidth = $(window).width();
  var $screencenter = $screenwidth / 2 - 177;
  var $startpos = $screencenter + 260;
  var overlay = jQuery('<div id="simpleoverlay"> </div>');

  //hover to slide functions
  $('div#feedback-form-container').hover(function() {
    $('div#feedback-form-container').animate({
      left: '+=260px'
    },
    '2000');
  },

  function() {
    $('div#feedback-form-container').animate({
      left: '-=260px'
    },
    '6000');

  });
  //click to slide to center of screen
  $('div#feedback-form-container').click(function() {
    $('div#feedback-form-container').animate({
      left: '+=' + $screencenter
    },
    {
      duration: '2000',
      easing: 'swing',
      complete: setTimeout(function() {
        overlay.appendTo(document.body)
      },
      500)
    });

    //unbind functions
    if ($('div#feedback-form-container').is(':animated')) $('div#feedback-form-container').off('click').off('hover');
    //set cursor back to default
    $('div#feedback-form-container').css('cursor', 'default');

  });

  $('#wpcf7-f52-t1-o1').submit(function() {

    $('div#feedback-form-container').animate({
      left: '-=' + $startpos
    },
    '6000');

    $('div#feedback-form-container').on('hover').on('click');
  });

Answer 1

The on and off methods are not used to turn events on and off, despite the somwhat confusing names. The on method is used to bind events, and the off method is used to unbind events.

When you unbind an event, it’s gone from the element. To use the event again you have to bind it again, and for that you have to specify what event handler you want to use for it. It’s not enough to just specify the event, because the element doesn’t remember the event handler from before.

Using .click(func) has the same effect as using .on('click', func).