Visit this Codepen for more examples - Codepen
I have been developing a drag and drop feature in my application. Once the item is dropped, it transitions from red to green and fades out smoothly.
The droppable element behind the draggable should also fade out simultaneously. I've experimented with various methods to achieve this effect on both elements, but I haven't been successful so far.
// Custom Javascript
$(init);
function init() {
$('#term-1').data( 'number', 1 ).attr( 'id', 'card'+1 ).draggable( {
containment: '#content',
stack: '#cardTerms div',
cursor: 'pointer',
revert: true
} );
// Additional card term & definition definitions here...
}
// Initialize variables and check matches
function handleCardDrop( event, ui ) {
// Check if the dropped card matches its slot number
// Update totalMatches variable and apply styling accordingly
}#content {
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* CSS rules defined for the drag-and-drop elements */
.fade {
color: #FFFFFF;
text-align: center;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>