Question

下面的代码预计会淡出叠加层并为两个div作为标题的左侧属性设置动画。好吧，这段代码就像1920x1080的魅力一样。它在我的平板电脑7英寸（其中通过点击取代了覆盖）也起作用。在1024x768 res中也是如此！但在1366x768的笔记本电脑中，有两件事情发生了：

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

以下决议也是如此： 1280x720（mg_caption只显示最小的部分） 1280x768（mg_caption只显示最小的部分） 1360x768的

如何解决这个问题？非常感谢提前

$('.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>

Answer 1

编辑：我发布了一个更好的解决方案，该解决方案使用来自左右属性的元素的左边属性来获取来自右边的元素。

这是工作代码：

的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');
});

坦克你

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

1 个答案: