转换不能在悬停关闭
我有问题。我想在徘徊时转换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'
});
})
尝试使用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); })
这应该中断动画队列和复位,准备下一个。
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>
它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>
我刚刚发现,第二过渡工作,当第一个完成。任何方式来解决它? – Dassin
你可以添加html代码并做一个代码段请 – SilverSurfer
不是,一切都在wordpress上运行:( – Dassin