jQuery动画在不同的屏幕分辨率下中断

jquery animation breaks at different screen resolution

本文关键字：屏幕 分辨率 中断 动画 jQuery      更新时间：2023-09-26

下面的代码预计将淡出覆盖层并为两个作为标题的div 的左侧属性添加动画效果。好吧，这段代码在 1920x1080 下就像一个魅力。它也适用于我的平板电脑 7 英寸（其中过度被点击代替）。在 1024x768 分辨率中也会发生同样的情况！但是在我的1366x768笔记本电脑中，发生了两件事：

mg_caption仅移动其宽度的 1/3 mg_caption2根本没有出现

在以下决议中也会发生同样的情况：1280x720（mg_caption仅显示最小的部分）1280x768（mg_caption仅显示最小的部分）1360×768

如何解决？提前非常感谢 

$('.overlay').on('mouseenter', function() {
  $(this).fadeOut('slow');
  $(this).closest('.kenburns').css({
    "z-index": "11000",
    border: "inset 2px #000;"
  });
  $(this).siblings('.mg_caption').animate({
    left: "400px"
  }, {
    duration: 400,
    queue: false,
    easing: 'easeOutQuad'
  });
  $(this).siblings('.mg_caption2').animate({
    left: "0px"
  }, {
    duration: 500,
    queue: false,
    easing: 'easeOutQuad'
  });
});
$('.kenburns').on('mouseleave', function() {
  $(this).children('.mg_caption2').animate({
    left: "-700px"
  }, {
    duration: 500,
    queue: false,
    easing: 'easeOutQuad'
  });
  $(this).children('.mg_caption').animate({
    left: "2000px"
  }, {
    duration: 1000,
    queue: false,
    easing: 'easeOutQuad' //,
  });
  $(this).children('.overlay').fadeIn('slow');
});
.img-responsive {
  width: 100%;
}
.kenburns {
  overflow: hidden;
  position: relative;
  float: left;
}
.kenburns img {
  transition-duration: 20s;
  transform: scale(1.0);
  transform-origin: 50% 50%;
}
.kenburns img:hover {
  transform: scale(1.5);
  transform-origin: 50% 0%;
}
.mg_caption {
  position: absolute;
  top: 30px;
  background: rgba(100, 59, 15, 1.0);
  background: #FABC59;
  color: #B19D87;
  background: #000;
  color: #fff;
  width: 300px;
  height: 50px;
  padding: 10px;
  font-size: 1.2em;
  display: block;
  left: 2000px;
  z-index: 12000;
}
.mg_caption2 {
  position: absolute;
  top: 330px;
  background: rgba(100, 59, 15, 1.0);
  background: #FABC59;
  color: #B19D87;
  background: #000;
  color: #fff;
  width: 600px;
  height: 50px;
  padding: 10px;
  font-size: 1.2em;
  display: block;
  left: -700px;
  z-index: 12000;
  text-align: center;
}
.overlay {
  background: rgba(100, 59, 15, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-4 no-pad">
  <div class="kenburns">
    <img class="img-responsive" src="<?php  echo base_url( 'assets/images/WESTMINSTER_SINGLE.jpg' )  ?>" />
    <div class="overlay"></div>
    <div class="mg_caption">Westminster Single</div>
    <div class="mg_caption2">Lorem ipsum dedicat aliquod</div>
  </div>
</div>

编辑：我发布了一个更好的解决方案，它使用来自左侧元素的左属性和来自右侧的 elemenets 的右属性。

这是工作代码：

.css：

.mg_caption{
   position:absolute;
   top:30px;
   background: #000;
   color: #fff;
   width: 300px;
   height:50px;
   padding:10px;
   font-size:1.2em;
   right:-100%;
   z-index:12000;
}
.mg_caption2{
   position:absolute;
   top:180px;
   background: #000;
   color: #fff;
   width: 600px;
   height:50px;
   padding:10px;
   font-size:1.2em;
   left:-100%;
   z-index:12000;
}

.JS：

    $('.overlay').on('mouseenter',function(){
    $(this).fadeOut('slow');
    $(this).closest('.kenburns').css({
        "z-index": "11000",
        border: "inset 2px #000;"
    });
    if (animating === true)
    {
        $(this).siblings('.mg_caption').animate({
            right: "-30%"
        }, {
            duration:400,
            queue:false,
            easing:'easeOutQuad'
        });
        $(this).siblings('.mg_caption2').animate({
            left:"0%"
        }, {
            duration:500,
            queue:false,
            easing:'easeOutQuad'
        });
    }
});
$('.kenburns').on('mouseleave', function(){
    if (animating === true)
    {
        $(this).children('.mg_caption2').animate({
            left: "-100%"
        }, {
            duration:500,
            queue:false,
            easing:'easeOutQuad'
        });
        $(this).children('.mg_caption').animate({
            right: "-100%"
        }, {
            duration:1000,
            queue:false,
            easing:'easeOutQuad'
        });
    }
    $(this).children('.overlay').fadeIn('slow');
});

坦克你

相关文章：