jquery animation breaks at different screen resolution

Question

The code below is expected to fade out the overlay and animate left property of two divs which are captions. Well, this code works like a charm at 1920x1080. It works as well in my tablet 7inchs (where overing is replaced by tapping). And the same happens in the 1024x768 res! But in my laptop at 1366x768 two things happen:

mg_caption moves in only for 1/3 of its width mg_caption2 doesn't appear at all

And the same happen in following resolutions: 1280x720 (mg_caption shows only a smallest portion) 1280x768 (mg_caption shows only a smallest portion) 1360x768

How to fix that? Many thanks in advance

 $('.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: I post a better solution which uses left property from elements whoch come from left and right property for elemenets which come from right.

This is the working code:

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 you