轉換不能在懸停關閉

我有問題。我想在徘徊時轉換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

轉換不能在懸停關閉

回答

相關問題