转换不能在悬停关闭

我有问题。我想在徘徊时转换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' 
}); 
})

来源

2017-06-03 Dassin

我刚刚发现，第二过渡工作，当第一个完成。任何方式来解决它？ – Dassin

你可以添加html代码并做一个代码段请 – SilverSurfer

不是，一切都在wordpress上运行:( – Dassin

尝试使用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); })

这应该中断动画队列和复位，准备下一个。

来源

2017-06-03 20:20:08 Sam0

css（）不会添加到队列堆栈中stop（）什么都不会做 – charlietfl

是，它不起作用:( – Dassin

编辑，以适应@charlietfl的点如果这不起作用，那么我没有什么，对不起 – Sam0

您的代码几乎没问题，只是将转换部分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>

来源

2017-06-03 21:07:03 SilverSurfer

它doesn' t工作，当你悬停在它上面时，转换开始，但是当它继续运行时，当鼠标关闭时，动画将停止并立即转换到另一个标志。 – Dassin

当鼠标右移时，你是否想慢慢转换标志？ – SilverSurfer

I只是希望它在悬停状态下转换，并且在第一次转换运行时没有跳转时拖动鼠标FECT。那就是问题所在。 – Dassin

CSS过渡不能被暂停或过渡的中间停止。如果我们在转换过程中重置转换持续时间，它就会停止最后的转换。

而JQUERY不支持背景更改与转换效果，像CSS那样高效。 JQUERY过渡将像fadeOut->change background Image->fadeIn。那不会很好，对吗？

因此，或者您可以排列这些mouseover和mouseout事件以便一个接一个地触发它们。

注：很显然，这将触发mouseover和mouseout最近的事件（如一旦我们mouseover并立即mouseout然后mouseout只完成mouseover事件是1秒后运行）。但我们没有其他选择。

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); 
 
    } 
 
}

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

来源

2017-06-03 23:48:54 jafarbtech

转换不能在悬停关闭

回答

相关问题