Transition funktioniert nicht auf Schwebeflug

Question

Ich habe ein Problem. Ich wollte dovs Hintergrund beim Schweben umwandeln, es funktioniert gut, außer wenn ich die Maus aus dem Div ziehe, funktioniert der Übergang dann nicht. Wie kann ich das beheben?

Wenn ich die Maus ausschalte, wird sofort die ursprüngliche Flagge angezeigt.

$("#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

try jQuery stop() wie so:

$("#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); })

dies sollte die Animation Warteschlange unterbrechen und zurücksetzen, bereit für die nächste.

Answer 2

Ihr Code ist fast Ok, ändern Sie nur den Übergangsteil 1 s zu 1s. Es ist eine Syntax Problem:

$("#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 Übergang kann nicht in der Mitte eines Übergangs angehalten oder gestoppt werden. Wenn wir die Übergangsdauer in der Mitte eines Übergangs zurücksetzen, stoppt sie einfach den letzten Übergang.

Und JQUERY unterstützt keine Hintergrundänderung mit Übergangseffekt, der so effizient ist wie CSS. JQUERY Übergang wird wie fadeOut->change background Image->fadeIn sein. das wird nicht nett sein, oder?

Alternativ könnten Sie die Ereignisse mouseover und mouseout in eine Warteschlange stellen, um sie nacheinander auszulösen.

Hinweis: Natürlich wird es löst die mouseover und mouseout Ereignisse in letzter Zeit (wie wenn wir mouseover und sofort mouseout dann die mouseout nur ausgeführt werden, nachdem das mouseover Ereignis Finishing, die 1 Sekunde). Aber wir haben keine Alternative.

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>