mouseenter/mouseleave caption swap funktioniert nicht, wenn Maus zu schnell bewegt wird

Question

Ich habe ein Problem mit mouseenter/mouseleave, um Verhalten auszulösen, bei dem die Bewegung am meisten über die Zielelemente zu schnell unerwünschtes Verhalten verursacht. Ich habe ein paar Threads mit ähnlichen Problemen gesehen, aber keine, die mein Problem zu lösen scheinen.

Ich erstelle ein Raster von Bildern mit überlagerten "Titel" -Beschriftungen. Ich versuche, es so zu machen, dass, wenn der Benutzer über ein Bild in dem Raster mauset, die Titelbeschriftung ausgeblendet wird, und stattdessen eine Beschreibungsbeschriftung angezeigt wird. Dies wird dann auf mouseleave umgekehrt und die Titelbezeichnung erscheint wieder.

Ich habe mouseenter/mouseleave und fadeIn/FadeOut verwendet, um den Effekt zu erzielen - es funktioniert ok, wenn Sie langsam zwischen den Blöcken bewegen, aber wenn Sie zu schnell bewegen, werden "Titel" und "Beschreibung" beide gleichzeitig angezeigt. Hier ist mein Code:

$(".stage").mouseenter(function() { 
 
    var desc = $(".desc", this); 
 
    var title = $(".title", this); 
 
    title.fadeOut(200, "swing", function() { 
 
    desc.fadeIn(100, "swing"); 
 
    }); 
 
}).mouseleave(function() { 
 
    var desc = $(".desc", this); 
 
    var title = $(".title", this); 
 
    desc.fadeOut(0, "swing", function() { 
 
    title.fadeIn(0, "swing"); 
 
    }); 
 
});

.stage { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: #1d2452; 
 
    color: white; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.stage > .caption { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
    text-align: center; 
 
} 
 

 
.desc { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div> 
 

 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div> 
 

 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div>

Und JSfiddle hier - https://jsfiddle.net/y16nufd7/1/

Answer 1

Verwenden stop() dies zu erreichen:

$(".stage").mouseenter(function() { 
 
    var desc = $(".desc", this); 
 
    var title = $(".title", this); 
 
    title.stop().fadeOut(200, "swing", function() { 
 
    desc.stop().fadeIn(100, "swing"); 
 
    }); 
 
}).mouseleave(function() { 
 
    var desc = $(".desc", this); 
 
    var title = $(".title", this); 
 
    desc.stop().fadeOut(0, "swing", function() { 
 
    title.stop().fadeIn(0, "swing"); 
 
    }); 
 
});

.stage { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: #1d2452; 
 
    color: white; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.stage > .caption { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
    text-align: center; 
 
} 
 

 
.desc { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div> 
 

 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div> 
 

 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div>

Answer 2

Es ist erwähnenswert, dass dies auch ohne JS erreicht werden kann. CSS gibt uns alles, was wir Übergänge auf schweben animieren müssen:

.stage { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: #1d2452; 
 
    color: white; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.title, 
 
.desc { 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 50%; 
 
    text-align: center; 
 
    transform: translate(0%, -50%); 
 
} 
 

 
.desc { 
 
    opacity: 0; 
 
} 
 

 
.stage:hover .caption .title { 
 
    opacity: 0; 
 
    -webkit-transition: opacity 200ms cubic-bezier(.02, .01, .47, 1); 
 
    -moz-transition: opacity 200ms cubic-bezier(.02, .01, .47, 1); 
 
    -ms-transition: opacity 200ms cubic-bezier(.02, .01, .47, 1); 
 
    -o-transition: opacity 200ms cubic-bezier(.02, .01, .47, 1); 
 
} 
 

 
.stage:hover .caption .desc { 
 
    opacity: 1; 
 
    -webkit-transition: opacity 100ms cubic-bezier(.02, .01, .47, 1) 200ms; 
 
    -moz-transition: opacity 100ms cubic-bezier(.02, .01, .47, 1) 200ms; 
 
    -ms-transition: opacity 100ms cubic-bezier(.02, .01, .47, 1) 200ms; 
 
    -o-transition: opacity 100ms cubic-bezier(.02, .01, .47, 1) 200ms; 
 
}

<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div> 
 

 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div> 
 

 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div>