jquery slide in background image one logo hover

Question

Please check my attached codepen.

  $(document).ready(function(){
$("#imageWrapper-left").mouseover(function(){
   if ( $( "header" ).hasClass( "bg-holzhandel" ) )
    
    {
        $("header").removeClass("bg-holzhandel");
        
    }
    $("header").addClass("bg-palettenwerk");
    
});

$("#imageWrapper-right").mouseover(function(){
    if ( $( "header" ).hasClass( "bg-palettenwerk" ) ){
        
        $("header").removeClass("bg-palettenwerk");
    }
    
    $("header").addClass("bg-holzhandel"); 
    
});

    });

header{
  min-height: 400px;
  display: block;
    background-image: url(http://mooxidesign.com/wp-content/uploads/2014/04/Free-Polygonal-Low-Poly-Background-2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.blue-bar{
  background-color:blue;
  padding: 40px;
  
  
}

.bg-palettenwerk{
  display: block;
    background-image: url(http://mooxidesign.com/wp-content/uploads/2014/04/Free-Polygonal-Low-Poly-Background-2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.bg-holzhandel{
  display: block;  
    background-image: url(http://s3-us-west-2.amazonaws.com/i.cdpn.io/58345.EFlLy.3e949596209919be54cb61f243defd4b.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#imageWrapper-left,#imageWrapper-right{color:white}
   
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="banner">
          <div class="blue-bar text-center"> 
              <div id="imageWrapper-left" class="col-md-3">Logo 1</div>
            <div class="col-md-6">MAIN LOGO</div>
             <div id="imageWrapper-right" class="col-md-3">Logo 2</div>
          </div>
      </header>

My requirements :

1. when mouseover on logo1 - I want to only slide in .bg-palettenwerk from right to left and keep it until number-2

2. when mouseover on logo2 - I want to only slide in bg-holzhandel from left to right and keep it until number-1

Please check the attached codepen for your convenience.

Answer 1

jQuery by default doest support animate on 'background-position' on single axis. You have to define your own animation

I have added a small function to animate the way you were looking out for

$.fn.animateBG = function(x,y,speed,e,comp) {
    var pos = this.css('background-position').split(' ');
    this.x = pos[0].split('px')[0] || 0;
    this.y = pos[1].split('px')[0] || 0;
    $.Animation(
        this, {x: x, y: y }, {duration:speed, easing:e, complete:comp}
        ).progress(function(e) {this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px');
    });
    return this;
}

Using this function you can add your animations to your background div. Please be advised that you need to have the animation:

1) start from x = 100% -> 0 for Fly Left to Right, CSS added a background-position 100vw 0

2) start from x = -100% -> 0 for Fly Right to Left, CSS added a background-position -100vw 0

Your Y stays constant

$("#imageWrapper-left").mouseover(function(){
  if(!$('header').hasClass('bg-palettenwerk')){      
      $("header")
        .removeClass("bg-holzhandel")
        .addClass("bg-palettenwerk")
        .css({'background-position':'100vw  0'})
        .animateBG(0,0,300,'linear',function(){
          $('header').css({'background-position':'0 0'});
        });
  }
});

$("#imageWrapper-right").mouseover(function(){
  if(!$('header').hasClass('bg-holzhandel')){
      $("header")
        .removeClass("bg-palettenwerk")
        .addClass("bg-holzhandel")
        .css({'background-position':'-100vw  0'})
        .animateBG(0,0,300,'linear',function(){
          $(this).css({'background-position':'0 0'});
        });
  }
});

Note you might be looking at whitespace when the animation is on, but you can always tweak up your css and help one suggestion would be multiple backgrounds.

Code Pen http://codepen.io/anon/pen/JYXBZp

Cheers!