Question

我有这个jQuery动画横幅，我希望小滚动字与大字一起垂直居中＆＃34;一个＆＃34;，无论浏览器宽度如何。它最初的工作原因是我在CSS中设置的媒体查询，但是如果你调整浏览器窗口的大小，则对齐会变得混乱。如何修改代码，以便在窗口大小调整时更新textTop的值？我尝试用$(window).on('resize', function(){...})包装startSlider函数的内容但是没有用。

＆＃13;

$(document).ready(function() {
  startSlider(0);

  function startSlider(index) {
    var textTop = $('.descriptor').css('top');
    $('#feedback').text('textTop = ' + textTop);
    var $img = $('#hp-animation div img').eq(index);
    var $descriptor = $('#hp-animation div span.descriptor').eq(index);

    $img.fadeIn(1000);
    $descriptor.show().animate({
      top: '-=50px',
      opacity: 1
    }, 1000, 'easeOutQuad', function() {

      $(this).delay(2000).animate({
        top: '-=50px',
        opacity: 0
      }, 500, 'easeOutQuad', function() {
        $(this).hide().css('top', textTop);
      });

      $img.delay(2000).fadeOut(600, function() { /* It seems that the speed here needs to be greater than the speed of the above animation; otherwise, the value of textTop is set before the animation is finished. */
        if ($('#hp-animation div img').length - 1 == index) startSlider(0);
        else startSlider(index + 1);
      });
    });
  }
});

＆＃13;

#hp-animation {
  height: 500px;
  background: #e6eaed;
  position: relative;
  overflow: hidden;
}

#hp-animation #big-one {
  font-family: sans-serif;
  font-size: 18em;
  line-height: 1;
  letter-spacing: -15px;
  font-weight: 200;
  color: #f05c23;
  margin: 0;
  position: absolute;
  right: 46%;
  top: 70px;
  z-index: 3;
}

#hp-animation img,
#hp-animation .descriptor {
  display: none;
  opacity: 0;
  position: absolute;
}

#hp-animation img {
  left: 50%;
  opacity: .25;
  z-index: 1;
}

#hp-animation .descriptor {
  font-size: 3em;
  line-height: 1;
  left: 58%;
  top: 275px;
  font-family: sans-serif;
  font-size: 48px;
  color: #394349;
  z-index: 2;
}

#feedback {
  position: absolute;
  padding: 20px;
  left: 0;
  bottom: 0;
}

@media (max-width: 959px) {
  #hp-animation {
    height: 400px;
  }
  #hp-animation #big-one {
    font-size: 15em;
    top: 60px;
  }
  #hp-animation img {
    height: 400px;
  }
  #hp-animation .descriptor {
    top: 230px;
  }
}

@media (max-width: 767px) {
  #hp-animation {
    height: 300px;
  }
  #hp-animation #big-one {
    font-size: 10em;
    top: 55px;
    right: 50%;
  }
  #hp-animation img {
    height: 300px;
  }
  #hp-animation .descriptor {
    top: 180px;
    font-size: 2em;
  }
}

@media (max-width: 500px) {
  #hp-animation {
    height: 200px;
  }
  #hp-animation #big-one {
    font-size: 6em;
    top: 42px;
    right: 54%;
    letter-spacing: -10px;
  }
  #hp-animation img {
    height: 200px;
    left: 50%;
  }
  #hp-animation .descriptor {
    top: 135px;
    left: 55%;
    font-size: 2em;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.js"></script>

<div id="hp-animation">
  <p id="big-one">one</p>

  <div>
    <img src="http://toprival.com/temp/link-animation/icon-one-partner.png">
    <span class="descriptor">Partner</span>
  </div>

  <div>
    <img src="http://toprival.com/temp/link-animation/icon-one-standard.png">
    <span class="descriptor">Standard</span>
  </div>

  <div>
    <img src="http://toprival.com/temp/link-animation/icon-one-platform.png">
    <span class="descriptor">Platform</span>
  </div>

  <div>
    <img src="http://toprival.com/temp/link-animation/icon-one-invoice.png">
    <span class="descriptor">Invoice</span>
  </div>

  <div>
    <img src="http://toprival.com/temp/link-animation/icon-one-solution.png">
    <span class="descriptor">Solution</span>
  </div>

  <div id="feedback"></div>
</div>

＆＃13;

Answer 1

在我破坏我的头之前，我遇到了类似的问题。我无法找到将.resize与时间延迟循环结合使用的方法。我最终做的是类似于我在下面所做的事情。基本上，我使用类和css来执行动画而不是jQuery。所以我所做的就是添加和删除类，然后使用css来完成剩下的工作。

对于css关键帧来说，这实际上看起来也是一个很好的场景，可能值得一试。

希望有所帮助。

＆＃13;

$(document).ready(function() {
  var counter = 2; 
  startSlider();
  setTimeout(function() {
      $('#hp-animation>div:nth-of-type(1)').addClass('active');
  }, 1000);
  
  function startSlider() {
  setTimeout(function() {
    var next = counter == 1 ? 5 : counter - 1;
	var descriptor = $('#hp-animation>div:nth-of-type(' +  counter + ')');
	var next = $('#hp-animation>div:nth-of-type(' +  next + ')');
	var other_descriptors = $('#hp-animation>div');
	
	//remove classes
	other_descriptors.removeClass('active next');
	
	//add classes
	next.addClass('next');
	descriptor.addClass('active');
    startSlider();
	if(counter<5){
		counter++;
	}else{
		counter=1;
	}
	return counter;
	}, 5000);

}
});

＆＃13;

#hp-animation .next .descriptor {
    top: 175px;
}
#hp-animation .active .descriptor {
    opacity: 1;
    top: 225px;
}
#hp-animation .active img {
	opacity:0.25;
}
#hp-animation img , #hp-animation .descriptor{
	transition: 0.5s ease;
	-webkit-transition:  0.5s ease;
  -moz-transition:  0.5s ease;
  -ms-transition:  0.5s ease; 
  -o-transition:  0.5s ease;

}
#hp-animation {
  height: 500px;
  background: #e6eaed;
  position: relative;
  overflow: hidden;
}

#hp-animation #big-one {
  font-family: sans-serif;
  font-size: 18em;
  line-height: 1;
  letter-spacing: -15px;
  font-weight: 200;
  color: #f05c23;
  margin: 0;
  position: absolute;
  right: 46%;
  top: 70px;
  z-index: 3;
}

#hp-animation img,
#hp-animation .descriptor {
  opacity: 0;
  position: absolute;
}

#hp-animation img {
  left: 50%;
  z-index: 1;
}

#hp-animation .descriptor {
  font-size: 3em;
  line-height: 1;
  left: 58%;
  top: 275px;
  font-family: sans-serif;
  font-size: 48px;
  color: #394349;
  z-index: 2;
}

#feedback {
  position: absolute;
  padding: 20px;
  left: 0;
  bottom: 0;
}

@media (max-width: 959px) {
#hp-animation .next .descriptor{
    top: 130px;
}
#hp-animation .active .descriptor {
    opacity: 1;
    top: 180px;
}
  #hp-animation {
    height: 400px;
  }
  #hp-animation #big-one {
    font-size: 15em;
    top: 60px;
  }
  #hp-animation img {
    height: 400px;
  }
  #hp-animation .descriptor {
    top: 230px;
  }
}

@media (max-width: 767px) {
#hp-animation .next .descriptor {
    top: 80px;
}
#hp-animation .active .descriptor {
    opacity: 1;
    top: 130px;
}
  #hp-animation {
    height: 300px;
  }
  #hp-animation #big-one {
    font-size: 10em;
    top: 55px;
    right: 50%;
  }
  #hp-animation img {
    height: 300px;
  }
  #hp-animation .descriptor {
    top: 180px;
    font-size: 2em;
  }
}

@media (max-width: 500px) {
  #hp-animation {
    height: 200px;
  }
  #hp-animation #big-one {
    font-size: 6em;
    top: 42px;
    right: 54%;
    letter-spacing: -10px;
  }
  #hp-animation img {
    height: 200px;
    left: 50%;
  }
  #hp-animation .descriptor {
    top: 135px;
    left: 55%;
    font-size: 2em;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hp-animation">
  <p id="big-one">one</p>

  <div>
    <img src="http://toprival.com/temp/link-animation/icon-one-partner.png">
    <span class="descriptor">Partner</span>
  </div>

  <div>
    <img src="http://toprival.com/temp/link-animation/icon-one-standard.png">
    <span class="descriptor">Standard</span>
  </div>

  <div>
    <img src="http://toprival.com/temp/link-animation/icon-one-platform.png">
    <span class="descriptor">Platform</span>
  </div>

  <div>
    <img src="http://toprival.com/temp/link-animation/icon-one-invoice.png">
    <span class="descriptor">Invoice</span>
  </div>

  <div>
    <img src="http://toprival.com/temp/link-animation/icon-one-solution.png">
    <span class="descriptor">Solution</span>
  </div>

  <div id="feedback"></div>
</div>

＆＃13;

无法在jQuery函数中动态调整CSS值

1 个答案: