使用animate()的时候,有时候会出现移进移出的闪动问题

怎么解决这种问题呢?在animate()前面需要加上stop()

例如:

$(".nav_list").hover(function(){
    $(".div1").stop().slowDown();
},function(){
    $(".div1").stop().slowUp();
})

 

转载于:https://www.cnblogs.com/wuxibolgs329/p/6204572.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,需要在HTML中添加一个包含图片的容器,然后使用CSS设置容器的宽度和溢出隐藏属性,使其能够容纳图片并隐藏超出部分。 ```html <div class="image-container"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <!-- 在这里添加更多图片 --> </div> ``` ```css .image-container { width: 100%; overflow: hidden; } ``` 接下来,使用jQuery的animate()方法实现图片的无限滚动。我们需要先获取图片容器的宽度,并将第一张图片复制一份放到最后,以便能够无缝切换。 ```javascript $(document).ready(function() { var container = $('.image-container'); var images = container.find('img'); var width = images.first().width(); var totalWidth = width * images.length; container.width(totalWidth); var speed = 3000; // 滚动速度,单位为毫秒 function animateImages() { container.animate({marginLeft: -width}, speed, function() { container.css({marginLeft: 0}); container.find('img').first().appendTo(container); }); } var interval = setInterval(animateImages, speed); container.on('mouseenter', function() { clearInterval(interval); }); container.on('mouseleave', function() { interval = setInterval(animateImages, speed); }); }); ``` 以上代码中,我们定义了一个animateImages()函数,用于实现图片的滚动。在函数中,我们使用animate()方法将容器向左移动一个图片的宽度,并在动画完成后将第一张图片移到最后。然后,我们使用setTimeout()函数调用animateImages()函数,从而实现图片的无限滚动。 接下来,我们定义一个interval变量,用于存储滚动定时器的ID,并将其初始化为调用animateImages()函数的结果。然后,我们在鼠标进入图片容器时清除定时器,鼠标离开时重新启动定时器,从而实现鼠标移入停止滚动,移出继续滚动的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值