Stop when mouse slides up in jquery

Sliding the mouse up to stop is a commonly used interactive effect in front-end development, which can provide users with a better operating experience. In achieving this effect, jQuery is a very convenient and fast choice.

First of all, we need to understand the event binding method in jQuery. jQuery provides two main event binding methods, namely the .on() and .bind() methods. The difference between these two methods is that the .on() method can bind dynamically generated elements, while the .bind() method can only bind statically generated elements.

So, let’s take the .on() method as an example to see how to achieve the effect of stopping when the mouse slides up.

1. Preparation

Before starting the implementation, we need to prepare some basic HTML and CSS code. First, we need to create a div container, then place the content that needs to be slid into the container, and add some basic styles to the container and content. The specific code is as follows:

<div class="container">
    <ul class="list">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ul>
</div>

<style>
  .container{
    width: 300px;
    height: 100px;
    overflow: hidden;
    border: 1px solid #ccc;
    position: relative;
  }

  .list{
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
  }

  .list li{
    height: 20px;
    line-height: 20px;
  }
</style>

2. To achieve the stop effect when the mouse slides up

First, you need to bind the mouse slide-in and slide-out events, and then control the start and start of the animation in the event callback function pause. The specific code is as follows:

var timer; // 定时器变量
var speed = 30; // 滚动速度

// 当鼠标滑入容器时，动画暂停
$('.container').on('mouseenter', function(){
  clearInterval(timer);
});

// 当鼠标离开容器时，动画继续
$('.container').on('mouseleave', function(){
  timer = setInterval(function(){
    $('.list').animate({
      marginTop: '-20px'
    }, speed, function(){
      // 动画完成时，将第一个li元素移到最后
      $(this).css({marginTop: 0}).find('li:first').appendTo(this);
    });
  }, 2000);
});

// 页面加载完成后，自动触发鼠标离开容器事件
$(document).ready(function(){
  $('.container').trigger('mouseleave');
});

In the above code, we use the setInterval() and clearInterval() methods to implement timer control of the scrolling effect. When the mouse slides into the container, the timer is cleared and the animation is paused; when the mouse leaves the container, the timer is restarted and the animation continues.

3. Effect optimization

After the above code is completed, we can make some optimizations to the code to make it more readable and reusable.

First of all, we can encapsulate the animation effect into a function for easy reuse. The specific code is as follows:

function startRoll() {
  timer = setInterval(function(){
    $('.list').animate({
      marginTop: '-20px'
    }, speed, function(){
      $(this).css({marginTop: 0}).find('li:first').appendTo(this);
    });
  }, 2000);
}

Secondly, we can also set a global variable for the timer to control the timer in other codes. The code is as follows:

var timer = null; // 定时器变量
var speed = 30; // 滚动速度

// 当鼠标滑入容器时，动画暂停
$('.container').on('mouseenter', function(){
  clearInterval(timer);
});

// 当鼠标离开容器时，动画继续
$('.container').on('mouseleave', function(){
  startRoll();
});

// 页面加载完成后，自动触发鼠标离开容器事件
$(document).ready(function(){
  startRoll();
});

In the above optimized code, we set a global variable timer, which will be used in other codes to facilitate the implementation of some special needs. At the same time, we encapsulate the setTimeout() method into a function named startRoll() for easy reuse.

Summary

Through the above code implementation, we can see that it is very convenient and fast to use jQuery to achieve the stop effect when the mouse slides up. During the implementation process, we need to understand the event binding method and its parameters in jQuery, as well as basic knowledge such as the use of timers. At the same time, we can also improve the readability and reusability of the code through code optimization, and further improve development efficiency.

The above is the detailed content of Stop when mouse slides up in jquery. For more information, please follow other related articles on the PHP Chinese website!