Question

我有问题。我希望在悬停时改变div的背景，它工作正常，除非我把鼠标从div上移开，转换不起作用。我该如何解决这个问题？

当我关闭鼠标时，它立即变为原始标志。

$("#flag").hover(function(){
 $(this).css({
'background': 'url("http://visionfi.pl/wp-content/uploads/2017/06/EN.png")',
'background-size':'cover',
'transition':'1 s'
 });
}, function(){
$(this).css({
'background': 'url("http://visionfi.pl/wp-content/uploads/2017/06/PL.png")',
'background-size':'cover',
'transition':'1 s'
});
})

Answer 1

尝试使用jQuery stop()，如下所示：

$("#flag").hover(function(){ $(this).animate({ 'background': 'url("http://visionfi.pl/wp-content/uploads/2017/06/EN.png")', 'background-size':'cover' }, 1000); }, function(){ $(this).stop(true,false).animate({ 'background': 'url("http://visionfi.pl/wp-content/uploads/2017/06/PL.png")', 'background-size':'cover' }, 1000); })

这应该中断动画队列并重置它，为下一个准备好。

Answer 2

您的代码几乎正常，只需将转换部分1 s更改为1s即可。这是一个语法问题：

$("#flag").hover(function(){
 $(this).css({
     'background': 'url("http://visionfi.pl/wp-content/uploads/2017/06/EN.png")',
     'background-size':'cover',
     'transition':'3s'
 })}, function(){
 $(this).css({
     'background': 'url("http://visionfi.pl/wp-content/uploads/2017/06/PL.png")',
     'background-size':'cover',
     'transition':'3s'
 })
})

div {
    width: 100px;
    height: 100px;
    background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>DIV HOVER:</p>
<div id="flag"></div>

Answer 3

CSS转换无法在转换过程中暂停或停止。如果我们在转换过程中重置转换持续时间，它就会停止最后一次转换。

并且JQUERY不支持具有过渡效果的背景更改，就像CSS一样有效。 JQUERY过渡将像fadeOut->change background Image->fadeIn一样。那不好，对吗？

因此，您可以对这些mouseover和mouseout事件进行排队，以便一个接一个地触发它们。

注意：显然最近会触发mouseover和mouseout个事件（例如我们mouseover后立即mouseout，mouseout只会在完成1秒的mouseover事件。但我们没有其他选择。

＆＃13;

var animating = false,
  funqueue = [];
$("#flag").hover(function() {
  funqueue.push(function() {
    //console.log("mouseover");
    $("#flag").css({
      'background': 'url("http://visionfi.pl/wp-content/uploads/2017/06/EN.png")',
      'background-size': 'cover',
      'transition': '1s'
    });
  });
  if (!animating) executeFunctionQueue();
}, function() {
  funqueue.push(function() {
    //console.log("mouseout");
    $("#flag").css({
      'background': 'url("http://visionfi.pl/wp-content/uploads/2017/06/PL.png")',
      'background-size': 'cover',
      'transition': '1s'
    });
  });
  if (!animating) executeFunctionQueue();
});

function executeFunctionQueue() {
  var funct = funqueue.shift();
  if (funct) {
    animating = true;
    funct.call();
    setTimeout(function() {
      if (funqueue.length == 0) animating = false;
      else
        executeFunctionQueue();
    }, 1000);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flag" style="height:300px; background:url('http://visionfi.pl/wp-content/uploads/2017/06/PL.png'); background-size:cover; transition:1s">
</div>

＆＃13;

过渡不会在悬停时起作用

3 个答案: