Question

我正在尝试创建一个类似于加载程序的微调器，但是按照我自己的风格，这就像一个旋转木马，它无限地水平旋转，并向捕获在搜索图标中的项添加“ active”类，但看来我的代码确实可以无法产生正确的结果。我只是想像旋转木马一样无限循环，并将类添加到搜索图标内的项目，有什么帮助，想法吗？

$(function() {
  setInterval(function() {
    animateSpinner();
  }, 2000);
});

function animateSpinner() {
  $('.anim-wrapper').animate({
    left: -(parseInt($('.anim-wrapper').attr('data-start-offset')) + 60)
  }, 500, function() {
    $('.anim-wrapper .active').removeClass('active').next().addClass('active');
    $('.anim-circle:nth-child(1)').appendTo($('.anim-wrapper'));
  });
}

body {
  padding: 64px;
  margin: 0px;
  color: #242424;
}

.anim-wrapper {
  overflow: auto;
  left: -14px;
  position: relative;
  width: 720px;
  padding: 0px;
  margin: 0px;
  top: 10px;
  height: 61px;
  overflow: hidden;
}

.anim-circle {
  width: 50px;
  height: 50px;
  background: #ededed;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  list-style: none;
  margin: 5px;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
}

.position-relative {
  position: relative;
}

.magnifying-wrapper {
  position: absolute;
  width: 80px;
  height: 80px;
  z-index: 999;
  margin: 0px auto;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100px;
  top: 11px;
}

.cn-spinner {
  width: 295px;
  position: relative;
  height: 150px;
  overflow: hidden;
}

.anim-circle.active {
  /* transform: scale(1.21); */
  background: #ef7100;
  color: #FFF;
}

<link href="https://1662037994.rsc.cdn77.org/plugins/foundry/css/themify-icons.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position-relative cn-spinner center-content-parent">
  <div class="magnifying-wrapper">
    <i class="ti-search"></i>
  </div>
  <ul class="anim-wrapper overflow-auto" data-start-offset="14">
    <li class="anim-circle">Jobs</li>
    <li class="anim-circle">Real<br>estate</li>
    <li class="anim-circle active">Busi-<br>ness</li>
    <li class="anim-circle">Cars</li>
    <li class="anim-circle">Deals</li>
    <li class="anim-circle">Events</li>
  </ul>
</div>

Answer 1

这是您的代码的有效演示。我根据您的要求调整了左值以进行处理。

$(function(){

			setInterval(function(){
				animateSpinner();
			}, 2000);
		});

		function animateSpinner(){
			$('.anim-wrapper').animate({
				left: -  ( parseInt( $('.anim-wrapper').attr('data-start-offset') ) )
				},
				500, function() {

				$('.anim-wrapper .active').removeClass('active').next().addClass('active');
				$('.anim-circle:nth-child(1)').appendTo($('.anim-wrapper'));
				

			});
		}

body{
			padding: 64px;
			margin: 0px;
			color: #242424;
		}
		.anim-wrapper{
    overflow: auto;
			left: -14px;
		    position: relative;
	        width: 720px;
	        padding:  0px;
	        margin: 0px;
		    top: 10px;
		    height: 61px;
		    overflow:hidden;
		}
		.anim-circle{
			width: 50px;
			height: 50px;
			background:#ededed;
			display: flex;
			align-items: center;
			justify-content: center;
			float: left;
			list-style: none;
			margin: 5px;
			border-radius: 50%;
			font-size: 12px;
			text-align: center;
		}
		.position-relative{
			position: relative;
		}
		.magnifying-wrapper{
			position: absolute;
		    width: 80px;
		    height: 80px;
		    z-index: 999;
		    margin: 0px auto;
		    left: 50%;
		    transform: translateX(-50%);
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    font-size: 100px;
		    top: 11px;
		}
		.cn-spinner{
			width: 295px;
		    position: relative;
		    height: 150px;
		    overflow: hidden;
		}
		.anim-circle.active{
			/* transform: scale(1.21); */
			background: #ef7100;
			color: #FFF;
 animation-name: spin;
  animation-duration: 1000ms;
		}
@keyframes spin {
from {
    transform:rotate(0deg);
}
to {
    transform:rotate(360deg);
}
}

<link href="https://1662037994.rsc.cdn77.org/plugins/foundry/css/themify-icons.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position-relative cn-spinner center-content-parent">
		<div class="magnifying-wrapper">
			<i class="ti-search"></i>
		</div>
		<ul class="anim-wrapper overflow-auto" data-start-offset="14">
			
			<li class="anim-circle">Jobs</li>
			<li class="anim-circle">Real<br>estate</li>
			<li class="anim-circle active">Busi-<br>ness</li>
			<li class="anim-circle">Cars</li>
			<li class="anim-circle">Deals</li>
			<li class="anim-circle">Events</li>

		</ul>
	</div>

Answer 2

在您的方法中，即使动画确实按预期运行，它看起来也只能运行一次。原因是在第一个动画上将其设置为-74（60 +14偏移），但是您从未更改此值，这就是为什么它保持在-74的原因。当您删除和添加元素时，会出现跳动的“动画”。

我提出了一个快速解决方案，可能需要花些时间。

这会操纵.anim-wrapper中的第一个孩子，而不是元素本身。

    
    $(function() {
      setInterval(function() {
        $('.anim-circle:nth-child(1)').animate({
          marginLeft: -74
        }, 500, function() {
          $('.anim-circle:nth-child(1)').css('margin-left', 5);
          $('.anim-wrapper .active').removeClass('active').next().addClass('active');
          $('.anim-circle:nth-child(1)').appendTo($('.anim-wrapper'));
        });
      }, 2000);
    });

    
      body {
      padding: 64px;
      margin: 0px;
      color: #242424;
    }
    
    .anim-wrapper {
      overflow: auto;
      left: -14px;
      position: relative;
      width: 720px;
      padding: 0px;
      margin: 0px;
      top: 10px;
      height: 61px;
      overflow: hidden;
    }
    
    
    .anim-circle {
      width: 50px;
      height: 50px;
      background: #ededed;
      display: flex;
      align-items: center;
      justify-content: center;
      float: left;
      list-style: none;
      margin: 5px;
      border-radius: 50%;
      font-size: 12px;
      text-align: center;
    }
    
    .position-relative {
      position: relative;
    }
    
    .magnifying-wrapper {
      position: absolute;
      width: 80px;
      height: 80px;
      z-index: 999;
      margin: 0px auto;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 100px;
      top: 11px;
    }
    
    .cn-spinner {
      width: 295px;
      position: relative;
      height: 150px;
      overflow: hidden;
    }
    
    .anim-circle.active {
      background: #ef7100;
      color: #FFF;
    }

    
        <link href="https://1662037994.rsc.cdn77.org/plugins/foundry/css/themify-icons.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position-relative cn-spinner center-content-parent">
  <div class="magnifying-wrapper">
    <i class="ti-search"></i>
  </div>

  <ul class="anim-wrapper data-start-offset="14">
    <li class="anim-circle">Jobs</li>
    <li class="anim-circle">Real<br>estate</li>
    <li class="anim-circle active">Busi-<br>ness</li>
    <li class="anim-circle">Cars</li>
    <li class="anim-circle">Deals</li>
    <li class="anim-circle">Events</li>
  </ul>
</div>

无限轮播动画

2 个答案: