jQuery анимация разрывается при разном разрешении экрана

Question

Ожидается, что нижеприведенный код затушевывает оверлей и анимирует свойство left двух div, которые являются титров. Ну, этот код работает как шарм в 1920x1080. Он также работает в моей таблетке 7inchs (где замена заменяется нажатием). И то же самое происходит в 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

Edit: я отправляю лучшее решение, которое использует левую собственность из элементов whoch приходят слева и право собственности на 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'); 
}); 

Tank вам