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

Question

预计下面的代码将淡出作为字幕的两个div的叠加和动画左属性。 嗯，这段代码的工作原理就像1920x1080的超级按钮。 它在我的7英寸平板电脑上也能很好地工作（在那儿，用攻丝代替覆盖）。 在1024x768分辨率中也是如此！ 但是在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');
});

保护你