jquery在背景圖片中滑動一個徽標懸停

Question

請檢查我附加的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>

我的要求：

1. 當鼠標懸停LOGO1 - 我想只有在右.bg-palettenwerk滑動至左側，並保持它，直到號 - 2

2. 當鼠標懸停在logo2上 - 我只想在bg-hol中滑動zhang從左到右，並保持數字1

請檢查附加codepen爲您的方便。

Answer 1

jQuery默認支持單軸上的'background-position'的動畫。你必須定義自己的動畫

我添加了一個小的功能，以動畫你尋找出

$.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; 
} 

使用此功能，您可以將您的動畫添加到您的背景格的方式。請注意，你需要有動畫：

1）開始從x = 100％ - > 0飛左到右，CSS中加入了背景位置100vw 0

2）開始從x = - 100％ - > 0飛右至左，CSS中加入了背景位置​​3210

你Ÿ保持不變

$("#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'}); 
     }); 
    } 
}); 

注意，你可能會在空白尋找當動畫已打開，但你總能調整你的CSS和幫助建議可能會有多種背景。

典筆http://codepen.io/anon/pen/JYXBZp

乾杯！