Question

请查看我附带的代码。

＆＃13;

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

＆＃13;

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}

＆＃13;

<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>

＆＃13;

我的要求：

鼠标悬停在logo1上时 - 我只想从右到左滑入.bg-palettenwerk并保持到数字2
鼠标悬停在logo2上时 - 我只想从左到右滑入bg-holzhandel并保持到数字-1

为方便起见，请查看附带的codepen。

Answer 1

jQuery默认情况下doest支持单轴上的'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;
}

使用此功能，您可以将动画添加到背景div。请注意，你需要动画：

1）从x = 100％开始 - ＆gt; 0表示从左到右飞，CSS添加了背景位置100vw 0

2）从x = -100％开始 - > 0从右向左飞过，CSS添加了背景位置-100vw 0

你的Y保持不变

$("#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

干杯！

jquery幻灯片在背景图像中的一个徽标悬停

1 个答案: