New callback on finish and remove delayed height adjustment

README.md

@@ -14,7 +14,7 @@ jQuery easy ticker is a news ticker like plugin which scrolls a list infinitely.
 * The speed of the transition can be changed.
 * Controls can be added in order to Play/pause or move the list up and down.
 * Cross browser support.
-* Light weight (2.76 KB - minified).
+* Light weight (2.82 KB - minified).
 
 ## Usage
 
@@ -77,7 +77,8 @@ $(document).ready(function(){
         },
         callbacks: {
             before: false,
-            after: false
+            after: false,
+            finish: false
         }
     });
 

easyticker.jquery.json

@@ -14,7 +14,7 @@
 		"vertical",
 		"easing"
     ],
-    "version": "3.3.0",
+    "version": "3.4.0",
     "author": {
         "name": "Aakash Chakravarthy",
         "url": "https://www.aakashweb.com/"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery-easy-ticker",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "jQuery easy ticker plugin allows to add news ticker like scroll to list elements",
   "scripts": {
     "build": "grunt"

src/jquery.easy-ticker.js

@@ -1,5 +1,5 @@
 /*
- * jQuery - Easy Ticker plugin - v3.3.0
+ * jQuery - Easy Ticker plugin - v3.4.0
  * https://www.aakashweb.com/
  * Copyright 2022, Aakash Chakravarthy
  * Released under the MIT License.
@@ -25,7 +25,8 @@
             },
             callbacks: {
                 before: false,
-                after: false
+                after: false,
+                finish: false
             }
         };
 
@@ -85,9 +86,7 @@
                 'margin': 0
             });
 
-            s.heightTimer = setInterval(function(){
-                adjustHeight(false);
-            }, 100);
+            adjustHeight(false);
 
         }
 
@@ -187,7 +186,9 @@
             });
 
             if(animate){
-                s.elem.stop(true, true).animate({height: wrapHeight}, s.opts.speed);
+                s.elem.stop(true, true).animate({height: wrapHeight}, s.opts.speed, function(){
+                    finish();
+                });
             }else{
                 s.elem.css('height', wrapHeight);
             }
@@ -204,7 +205,7 @@
             }
 
             if(!animate){
-                clearInterval(s.heightTimer);
+                finish();
             }
 
         }
@@ -234,6 +235,12 @@
 
         }
 
+        function finish(){
+            if(typeof s.opts.callbacks.finish === 'function'){
+                s.opts.callbacks.finish.call(s, s.targ);
+            }
+        }
+
         return {
             up: function(){ moveDir('up'); },
             down: function(){ moveDir('down'); },

test/test.html

@@ -28,11 +28,14 @@
         },
         callbacks: {
             before: function(ul, li){
-                console.log(this, ul, li);
+                console.log('before', this, ul, li);
                 $(li).css('color', 'red');
             },
             after: function(ul, li){
-                console.log(this, ul, li);
+                console.log('after', this, ul, li);
+            },
+            finish: function(a){
+                console.log('finish', this, a);
             }
         }
     }).data('easyTicker');
@@ -54,6 +57,12 @@
         myET.start();
     });
 
+    var ticker2 = $('.myTicker2').easyTicker({
+        interval: 5000,
+        height: 'auto',
+        visible: 3
+    });
+
     var ticker3 = $('.myTicker3').easyTicker().data('easyTicker');
     $('.up3').click(function(){
         ticker3.up();
@@ -63,6 +72,22 @@
         ticker3.down();
     });
 
+    var ticker4 = $('.myTicker4').easyTicker({
+        interval: 5000,
+        height: '50',
+        visible: 3
+    });
+
+    var ticker5 = $('.myTicker5').easyTicker({
+        interval: 5000,
+        height: '50',
+        visible: 3
+    });
+
+    $('.t5Btn').click(function(){
+        $('.t5Wrap').fadeToggle();
+    });
+
 });
 </script>
 
@@ -87,7 +112,7 @@ <h2>Ticker 1</h2>
 </div>
 
 <h2>Ticker 2</h2>
-<div class="myTicker">
+<div class="myTicker2">
     <ul>
         <li>Triangles can be made easily using CSS also without any images. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
         <li>List 2</li>
@@ -111,6 +136,35 @@ <h2>Ticker 3</h2>
     </ul>
 </div>
 
+<h2>Ticker 4</h2>
+<div class="myTicker4">
+    <ul>
+        <li>Triangles can be made easily using CSS also without any images. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
+        <li>List 2</li>
+        <li>This trick requires only div tags and some CSS works. To get this trick, just use the code below. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
+        <li>List 4</li>
+        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum porro quod nostrum est quos, rerum possimus voluptas exercitationem atque, vel fugiat nobis praesentium animi iure necessitatibus reprehenderit. Pariatur, tempore officia.</li>
+        <li class="last-item">Hey... Triangles can be made easily using CSS also without any images. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
+    </ul>
+</div>
+
+<h2>Ticker 5</h2>
+<button class="t5Btn">Toggle</button>
+<div class="t5Wrap">
+    <div class="myTicker5">
+        <ul style="width:100px">
+            <li>Triangles can be made easily using CSS also without any images. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
+            <li>List 2</li>
+            <li>This trick requires only div tags and some CSS works. To get this trick, just use the code below. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
+            <li>List 4</li>
+            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum porro quod nostrum est quos, rerum possimus voluptas exercitationem atque, vel fugiat nobis praesentium animi iure necessitatibus reprehenderit. Pariatur, tempore officia.</li>
+            <li class="last-item">Hey... Triangles can be made easily using CSS also without any images. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
+        </ul>
+    </div>
+</div>
+
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam cum, non in dolore doloribus voluptatibus ullam nisi deleniti facere reprehenderit animi, magnam quod necessitatibus illo reiciendis beatae expedita labore qui!</p>
+
 <style>
 .myTicker{
     border: 1px solid red;
@@ -130,6 +184,9 @@ <h2>Ticker 3</h2>
 .et-item-visible{
     color: blue !important;
 }
+.t5Wrap{
+    display: none;
+}
 </style>
 
   </body>