Upgraded event handling to jQuery v3.0. (#145)

* Upgraded event handling to jQuery v3.0.

* Update REAME.md

README.md

@@ -23,18 +23,18 @@ Links:
 
 Options:
 --------
- - **allowCss3Support** If you wish the plugin should animate always using jQuery animate method even if browser supporst CSS3 animations. Default is ```true```
- - **css3easing** Works when ```allowCss3Support``` is set to ```true``` - for full list see: http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function . Default is ```'linear'```
- - **easing** Requires jQuery easing plugin http://gsgd.co.uk/sandbox/jquery/easing/. Default is ```'linear'```
- - **delayBeforeStart** Time in milliseconds before the marquee starts animating. Default is ```1000```
- - **direction** Direction towards which the marquee will animate ```'left' / 'right' / 'up' / 'down'```. Default is ```'left'```. Todo: need to change this to ```ltr/rtl``` etc
- - **duplicated** Should the marquee be duplicated to show an effect of continuous flow. Use this only when the text is shorter than the container. Default is ```false```
- - **duration** Duration in milliseconds in which you want your element to travel. Default is ```5000```.
+ - **allowCss3Support** Force the usage of jQuery's animate method even if the target browser supports CSS3 animations. Default: ```true```
+ - **css3easing** Works when ```allowCss3Support``` is set to ```true```. See [here](http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function) for full list. Default: ```'linear'```
+ - **easing** Requires the jQuery [easing](http://gsgd.co.uk/sandbox/jquery/easing/) plugin. Default: ```'linear'```
+ - **delayBeforeStart** Time in milliseconds before the marquee starts animating. Default: ```1000```
+ - **direction** Direction towards which the marquee will animate ```'left' / 'right' / 'up' / 'down'```. Default: ```'left'```. Todo: need to change this to ```ltr/rtl``` etc
+ - **duplicated** Should the marquee be duplicated to show an effect of continuous flow. Use this only when the text is shorter than the container. Default: ```false```
+ - **duration** Duration in milliseconds in which you want your element to travel. Default: ```5000```.
  - **speed** Speed will override duration. Speed allows you to set a relatively constant marquee speed regardless of the width of the containing element. Speed is measured in pixels per second.
- - **gap** Gap in pixels between the tickers. Will work only when the ```duplicated``` option is set to ```true```. Default is ```20```. Note: ```20``` means ```20px``` so no need to use ```'20px'``` as the value.
- - **pauseOnHover** On hover pause the marquee. If browser supports CSS3 and ```allowCss3Support``` is set to ```true``` than it will be done using CSS3. Otherwise this will be done using jQuery plugin https://github.com/tobia/Pause. Default is ```false```. Check the demo page for a demo.
+ - **gap** Gap in pixels between the tickers. Will work only when the ```duplicated``` option is set to ```true```. Default: ```20```. Note: ```20``` means ```20px``` so no need to use ```'20px'``` as the value.
+ - **pauseOnHover** Pause the marquee on hover. If the browser supports CSS3 and ```allowCss3Support``` is set to ```true``` this will be done using CSS3. Otherwise this will be done using the jQuery [Pause](https://github.com/tobia/Pause) plugin. Default: ```false```. See demo page for example.
  - **pauseOnCycle** On cycle, pause the marquee for ```delayBeforeStart``` milliseconds.
- - **startVisible** The marquee will be visible in the start if set to `true`. Thanks to @nuke-ellington 👍
+ - **startVisible** The marquee will be visible from the start if set to `true`. Thanks to @nuke-ellington 👍
 
 Events:
 ------
@@ -49,33 +49,34 @@ Methods:
 These methods can be used like this:
 
  - First initialize marquee with any options ``` var $mq = $('.marquee').marquee();```
- - Then at any time you can call following methods ```var $mq.marquee('NAME-OF-METHOD-AS-STRING');```
+ - Then at any time you can call the following methods like this: ```var $mq.marquee('NAME-OF-METHOD-AS-STRING');```
 
 Here is the list of all methods:
 
  - **pause**: To pause the marquee at any time.
  - **resume**: To resume the marquee after being paused previously.
  - **toggle**: To toggle between pause and resume methods.
- - **destroy**: To remove marquee plugin from your element. This method is useful if you are loading/changing the data using Ajax or just another string. You can combine this with ```finished``` event so you can let marquee to show some data and soon it finishes showing, you can destroy it, change the html and than apply the plugin again. See the demo page for details (links provided above).
+ - **destroy**: To remove the marquee from your element. This method is useful if you are loading/changing the data using Ajax or just another string. You can combine this with the ```finished``` event so you can have the marquee show some data and as soon as it finishes showing that, you can destroy it, change the html and then apply the plugin again. See the demo page for details (links provided above).
 
 Usage:
 ----
 
 ### HTML:
 
+Usually you assign the marquee class to the desired element. Then you initialize it with an options hash in your code (see below).
+
 ```html
 <div class='marquee'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
 ```
 
-or use this if you want to start the plugin with no options but want to use data attributes. You can use all the options listed above as data attributes. This is how you can use them:
+Alternatively you can provide all the options listed above as data attributes:
 
 ```html
 <div class='marquee' data-duration='5000' data-gap='10' data-duplicated='true' >
     Lorem ipsum dolor sit amet, consectetur adipiscing elit END.
 </div>
 ```
 
-
 ### CSS:
 ```css
 .marquee {

jquery.marquee.js

@@ -78,7 +78,7 @@
                         // Clear timer
                         clearTimeout($this.timer);
                         // Unbind all events
-                        $this.find("*").addBack().unbind();
+                        $this.find("*").addBack().off();
                         // Just unwrap the elements that has been added using this plugin
                         $this.html($this.find('.js-marquee:first').html());
                     }
@@ -440,12 +440,12 @@
             };
 
             // bind pause and resume events
-            $this.bind('pause', methods.pause);
-            $this.bind('resume', methods.resume);
+            $this.on('pause', methods.pause);
+            $this.on('resume', methods.resume);
 
             if (o.pauseOnHover) {
-                $this.bind('mouseenter', methods.pause);
-                $this.bind('mouseleave', methods.resume);
+                $this.on('mouseenter', methods.pause);
+                $this.on('mouseleave', methods.resume);
             }
 
             // If css3 animation is supported than call animate method at once