Question

我在div中使用jQuery函数作为视差背景。

当页面加载时，我有一些动画背景的css webkit动画。

然而，在页面加载完成后，我的jQuery函数动画后台的视差效果不起作用。

这是我的代码：

$(document).ready(function(){
        
        $('#square').mousemove(function(e) {
             var x = -(e.pageX + this.offsetLeft) / 4;
             var y = -(e.pageY + this.offsetTop) / 4;
             $(this).css('background-position', x + 'px ' + y + 'px');
         });
        
});

#square { height: 700px; 
                  width: 500px; 
                  display: inline-block; 
                  margin-left: 100px; 
                  position: absolute; 
                  right: 37%; 
                  top: 15%;
		          background: transparent;
		         -webkit-animation-name: image-fadein;
		         -webkit-animation-delay: .8s;
		         -webkit-animation-duration: 1s;
		         -webkit-animation-iteration-count: 1;
		         -webkit-animation-timing-function: ease-in-out;
		         -webkit-animation-fill-mode: forwards;
		
                 @-webkit-keyframes image-fadein {
			        0% { background: transparent; }
			        25% { background: #f2efef; }
			        50% { background: #333; }
			        100% { background-image: url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
				           background-size: cover no-repeat;
				           background-position: 35% 30%; }
		         }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="square">
	<span class="l1"></span>
	<span class="l2"></span>
	<span class="l3"></span>
	<span class="l4"></span>
</div>

我应该提一下，当我从div元素中完全删除webkit动画时，jQuery函数可以工作，只留下高度，宽度，显示，边距，位置和背景。

有谁知道为什么webkit动画似乎干扰了jQuery代码？

Answer 1

这是因为使用关键帧规则设置动画的属性不能被内联css规则覆盖，或者至少不能被我测试过的任何方法覆盖。

你可以

将动画样式移动到类
将类添加到元素
添加动画和侦听器以侦听动画结束
在动画结束时删除动画类并重置背景图像和其他样式。

＆＃13;

$(document).ready(function(){
  $('#square').mousemove(function(e) {
    var x = -(e.pageX + this.offsetLeft) / 4;
    var y = -(e.pageY + this.offsetTop) / 4;
    $(this).css("background-position",x + 'px ' + y + 'px');
  }).on("animationend",function(e){
    //You can access animation-name value by
    //e.originalEvent.animationName

    $(this).removeClass("animated").css({
      backgroundImage:"url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg)",
      backgroundSize: 'cover no-repeat',
      backgroundPosition: '35% 30%'
    });
  });
});

＆＃13;

#square { 
  width: 80%; 
  height:100%;
  position: absolute; 
  top: 0px;
  left:0px;
  background: transparent;
}

.animated {
  -webkit-animation-name: image-fadein;
  -webkit-animation-delay: .8s;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;  
}

@-webkit-keyframes image-fadein {
  0% { background: transparent; }
  25% { background: #f2efef; }
  50% { background: #333; }
  100% { background-image: url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
    background-size: cover no-repeat;
    background-position: 35% 30%; }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="square" class="animated">
  <span class="l1"></span>
  <span class="l2"></span>
  <span class="l3"></span>
  <span class="l4"></span>
</div>

＆＃13;

您还可以遍历styleSheets集合以查找keyframes rule（＆＃34; image-fadein＆＃34;），从那里找到最后一个关键帧规则（＆＃34; 100％＆＃34; ），并从那里修改样式。

演示

＆＃13;

$(document).ready(function(){
  var KFSRule = findKFSRule("image-fadein");
  var KFRule = KFSRule && KFSRule.findRule("100%");
  $('#square').mousemove(function(e) {
    var x = -(e.pageX + this.offsetLeft) / 4;
    var y = -(e.pageY + this.offsetTop) / 4;
    if(KFRule){
      KFRule.style.backgroundPosition = x + 'px ' + y + 'px';
    }
  });
}); 

function findKFSRule(ruleName) {
  var foundRule = null;
  var sheets = [].slice.call(document.styleSheets);
  sheets.forEach(function(sheet){
    var rules = [].slice.call(sheet.cssRules);
    rules.forEach(function(rule){
      if(rule.type == CSSRule.WEBKIT_KEYFRAMES_RULE && rule.name==ruleName){
        foundRule = rule;
      }
    });
  });
  return foundRule;
}

＆＃13;

#square { 
  width: 80%; 
  height:100%;
  position: absolute; 
  top: 0px;
  left:0px;
  background: transparent;
  -webkit-animation-name: image-fadein;
  -webkit-animation-delay: .8s;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes image-fadein {
  0% { background: transparent; }
  25% { background: #f2efef; }
  50% { background: #333; }
  100% { background-image: url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
    background-size: cover no-repeat;
    background-position: 35% 30%; }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="square">
  <span class="l1"></span>
  <span class="l2"></span>
  <span class="l3"></span>
  <span class="l4"></span>
</div>

＆＃13;

请注意，如果它是外部样式表，则无法迭代样式表css规则。因此，您的样式必须嵌入页面中，即<style></style>

如果您需要在外部样式表中定义它们，您可能需要找到另一种利用CSSStyleSheet.deleteRule，CSSStyleSheet.insertRule或其他方法的工作。

Webkit动画干扰了jQuery功能

1 个答案: