Question

我有3个图像块，覆盖在这是一个透明的屏幕和一个文本块。在触摸设备上，当用户触摸半透明链接时，第一次半透明屏幕和文本动画起来。

我在检查用户在移动设备上时执行此功能：

if(isMobile.any())
   $('.animBlock a').on('touchstart', function(e) {
   $(this).filter(':not(:animated)').find('.animTransp').animate({top:"0"}, 300); // animate screen opacity on touch
   $(this).filter(':not(:animated)').find('.animText').animate({top:"30px"}, 300); // animate text on touch
});
;

这可以很好地在iPad等设备上制作动画。

我还想做的是有一个计时器，如果用户没有再次点击链接转到页面，那么在说3秒后，然后将2个div重新设置为原始位置。

任何帮助都非常感激。

由于

Answer 1

在其中一个已完成的动画上添加超时

if (isMobile.any()) {
  $('.animBlock a').on('touchstart', function(e) {

    var animationTrans = $(this).filter(':not(:animated)').find('.animTransp');
    var animationText = $(this).filter(':not(:animated)').find('.animText');

    animationTrans.animate({top:"0"}, 300); // animate screen opacity on touch
    animationText.animate({top:"30px"}, 300, function(){
      setTimeout(function() {
        animationText.animate({top:'-30px'});
        animationText.animate({top:"0"});
      }, 3000);
    });
  });
}

但我不建议使用jQuery动画。而是使用css。

<style>
.animTransp { top:-30px; position:relative; transition: top 0.3s;  }
.animTransp.active { top:0; }

.animText { top: 0; position:relative; transition: top 0.3s;}
.animText.active { top:30px; }
</style>

然后你的JS将如下：

if (isMobile.any()) {
  $('.animBlock a').on('touchstart', function(e) {

    var animationTrans = $(this).find('.animTransp:not(.active)');
    var animationText = $(this).find('.animText:not(.active)');

    animationText.add(animationTrans).addClass('active');

    setTimeout(function() {
      animationText.add(animationTrans).removeClass('active')
    }, 3000);
  });
}

可能需要为webkit mobile

的过渡属性添加前缀

jQuery动画回来开始一段时间

1 个答案: