The effect of the Happy Lantern based on jquery (seamless text up and down) _jquery

(function ($) {
  $.fn.extend ({
    "Slideup": function (value) {  
      var docthis = this;
      Default parameter
      value=$.extend ({
         "li_h": "",
         "time": Watts,
         "Movetime": 1000
      },value)  
      //Slide up animation
      function Autoani () {
        $ ("Li:first", Docthis). Animate ({"Margin-top":-value.li_h},value.movetime,function () {
          $ (this). CSS ("Margin-top", 0). Appendto (". Line");
        }
      }
      Automatic interval time up sliding
      var anifun = setinterval (autoani,value.time);
      
      Stop sliding while hovering, and continue to execute
      $ (docthis) when you leave. Hover (function () {
        clearinterval (anifun);      Clear Automatic sliding animation
      },function () {
        setinterval (autoani,value.time);  Continue animation}})}
(jQuery)

Main ideas:

Sliding animation, is to change the position of elements, there are two ways to change the position of the elements, a change in the Left,top attributes (relative positioning and absolute positioning), there is one, is now used here, change the value of the margin.

Animation process in the example above:

1. Set the value to change the margin-top;

2. Change the Margin-top value of the first Li by animate method to 30 (negative values move up);

3. After the animation completes, in the callback function, changes the current first Li's margin-top to "0"

4. Move the current first Li to the last of all Li. (Achieve seamless)

Case download

The above is the entire content of this article, I hope to help you, thank you for the support of cloud habitat community!