拖放完成后如何讓兩個元素淡出？

Question

Codepen 供參考 - Codepen

我正在開發一個拖放應用程序。 放置完成后，我將可拖動對象設置為從紅色變為綠色，然后淡出。

droppable 后面的draggable 也需要淡出。 我嘗試了幾種不同的方法來將淡入淡出技術應用於可拖動和可放置，但我無法到達那里。

 // Javascript $(init); function init() { $('#term-1').data( 'number', 1 ).attr( 'id', 'card'+1 ).draggable( { containment: '#content', stack: '#cardTerms div', cursor: 'pointer', revert: true } ); $('#term-2').data( 'number', 2 ).attr( 'id', 'card'+2 ).draggable( { containment: '#content', stack: '#cardTerms div', cursor: 'pointer', revert: true } ); $('#term-3').data( 'number', 3 ).attr( 'id', 'card'+3 ).draggable( { containment: '#content', stack: '#cardTerms div', cursor: 'pointer', revert: true } ); $('#term-4').data( 'number', 4 ).attr( 'id', 'card'+4 ).draggable( { containment: '#content', stack: '#cardTerms div', cursor: 'pointer', revert: true } ); $('#term-5').data( 'number', 5 ).attr( 'id', 'card'+5 ).draggable( { containment: '#content', stack: '#cardTerms div', cursor: 'pointer', revert: true } ); $('#term-6').data( 'number', 6 ).attr( 'id', 'card'+6 ).draggable( { containment: '#content', stack: '#cardTerms div', cursor: 'pointer', revert: true } ); $('#def-1').data( 'number', 1 ).droppable( { accept: '#cardTerms div', hoverClass: 'hovered', drop: handleCardDrop } ); $('#def-2').data( 'number', 2 ).droppable( { accept: '#cardTerms div', hoverClass: 'hovered', drop: handleCardDrop } ); $('#def-3').data( 'number', 3 ).droppable( { accept: '#cardTerms div', hoverClass: 'hovered', drop: handleCardDrop } ); $('#def-4').data( 'number', 4 ).droppable( { accept: '#cardTerms div', hoverClass: 'hovered', drop: handleCardDrop } ); $('#def-5').data( 'number', 5 ).droppable( { accept: '#cardTerms div', hoverClass: 'hovered', drop: handleCardDrop } ); $('#def-6').data( 'number', 6 ).droppable( { accept: '#cardTerms div', hoverClass: 'hovered', drop: handleCardDrop } ); } var totalCards = $('#cardTerms').children().length; var totalMatches = 0; function handleCardDrop( event, ui ) { var slotNumber = $(this).data( 'number' ); var cardNumber = ui.draggable.data( 'number' ); if ( slotNumber == cardNumber ) { totalMatches++; ui.draggable.addClass( 'correct' ); ui.draggable.addClass( 'fade' ); ui.draggable.draggable( 'disable' ); $(this).droppable( 'disable' ); ui.draggable.draggable( 'option', 'revert', false ); } if (totalMatches == totalCards) { $('#matchModal').modal('show'); } }

 #content { text-align: center; -moz-user-select: none; -webkit-user-select: none; user-select: none; } #cardTerms { margin: 10px auto 0 auto; } #cardDefs { margin: 0 auto; } #cardDefs { width: 100%; height: auto; padding: 15px; } #cardTerms { width: 100%; height: auto; padding: 15px; } #cardTerms div, #cardDefs div { float: left; width: auto; height: auto; padding: 10px; /*border: 1px solid #333;*/ background-color: #ff0000; color: #ffffff; margin: .5rem; text-align: left; } #cardTerms div:first-child, #cardDefs div:first-child { } #cardTerms div.hovered { background: #aaa; } #cardTerms div { border: 1px dashed #fff; } #cardDefs div { background: #fff; /*border: 1px solid #005575;*/ color: #000; font-size: 1em; line-height: 1.3; } #cardDefs div.ui-draggable-dragging { -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); box-shadow: 0 0 .5em rgba(0, 0, 0, .8); } #card1.correct { background: #5fcf80; color: #fff; } #card2.correct { background: #5fcf80; color: #fff; } #card3.correct { background: #5fcf80; color: #fff; } #card4.correct { background: #5fcf80; color: #fff; } #card5.correct { background: #5fcf80; color: #fff; } #card6.correct { background: #5fcf80; color: #fff; } .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"/> <div class="container"> <div class="row"> <div class="col-sm-12"> <!-- HTML here --> <div id="content" class="content"> <div class="row"> <div class="col-sm-12 col-md-4 col-lg-6"> <div id="cardTerms"> <div id="term-1">class</div> </div> </div> <div class="col-sm-12 col-md-8 col-lg-6"> <div id="cardDefs"> <div class="card"> <div class="card-body" id="def-1"> HTML elements can have one or more classes, separated by spaces. You can style elements using CSS by selecting them with their classes. </div> </div> </div> </div> </div> </div> </div> </div> </div>

Answer 1

如果您還向其添加fade class ，則可拖動對象后面的可放置對象也會淡出。

$(this).addClass( 'fade' );

 // Javascript $(init); function init() { $('#term-1').data( 'number', 1 ).attr( 'id', 'card'+1 ).draggable( { containment: '#content', stack: '#cardTerms div', cursor: 'pointer', revert: true } ); $('#term-2').data( 'number', 2 ).attr( 'id', 'card'+2 ).draggable( { containment: '#content', stack: '#cardTerms div', cursor: 'pointer', revert: true } ); $('#term-3').data( 'number', 3 ).attr( 'id', 'card'+3 ).draggable( { containment: '#content', stack: '#cardTerms div', cursor: 'pointer', revert: true } ); $('#term-4').data( 'number', 4 ).attr( 'id', 'card'+4 ).draggable( { containment: '#content', stack: '#cardTerms div', cursor: 'pointer', revert: true } ); $('#term-5').data( 'number', 5 ).attr( 'id', 'card'+5 ).draggable( { containment: '#content', stack: '#cardTerms div', cursor: 'pointer', revert: true } ); $('#term-6').data( 'number', 6 ).attr( 'id', 'card'+6 ).draggable( { containment: '#content', stack: '#cardTerms div', cursor: 'pointer', revert: true } ); $('#def-1').data( 'number', 1 ).droppable( { accept: '#cardTerms div', hoverClass: 'hovered', drop: handleCardDrop } ); $('#def-2').data( 'number', 2 ).droppable( { accept: '#cardTerms div', hoverClass: 'hovered', drop: handleCardDrop } ); $('#def-3').data( 'number', 3 ).droppable( { accept: '#cardTerms div', hoverClass: 'hovered', drop: handleCardDrop } ); $('#def-4').data( 'number', 4 ).droppable( { accept: '#cardTerms div', hoverClass: 'hovered', drop: handleCardDrop } ); $('#def-5').data( 'number', 5 ).droppable( { accept: '#cardTerms div', hoverClass: 'hovered', drop: handleCardDrop } ); $('#def-6').data( 'number', 6 ).droppable( { accept: '#cardTerms div', hoverClass: 'hovered', drop: handleCardDrop } ); } var totalCards = $('#cardTerms').children().length; var totalMatches = 0; function handleCardDrop( event, ui ) { var slotNumber = $(this).data( 'number' ); var cardNumber = ui.draggable.data( 'number' ); //console.log($(this)); if ( slotNumber == cardNumber ) { totalMatches++; ui.draggable.addClass( 'correct' ); ui.draggable.addClass( 'fade' ); ui.draggable.draggable( 'disable' ); $(this).droppable( 'disable' ); $(this).addClass( 'fade' ); ui.draggable.draggable( 'option', 'revert', false ); } if (totalMatches == totalCards) { $('#matchModal').modal('show'); } }

 #content { text-align: center; -moz-user-select: none; -webkit-user-select: none; user-select: none; } #cardTerms { margin: 10px auto 0 auto; } #cardDefs { margin: 0 auto; } #cardDefs { width: 100%; height: auto; padding: 15px; } #cardTerms { width: 100%; height: auto; padding: 15px; } #cardTerms div, #cardDefs div { float: left; width: auto; height: auto; padding: 10px; /*border: 1px solid #333;*/ background-color: #ff0000; color: #ffffff; margin: .5rem; text-align: left; } #cardTerms div:first-child, #cardDefs div:first-child { } #cardTerms div.hovered { background: #aaa; } #cardTerms div { border: 1px dashed #fff; } #cardDefs div { background: #fff; /*border: 1px solid #005575;*/ color: #000; font-size: 1em; line-height: 1.3; } #cardDefs div.ui-draggable-dragging { -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); box-shadow: 0 0 .5em rgba(0, 0, 0, .8); } #card1.correct { background: #5fcf80; color: #fff; } #card2.correct { background: #5fcf80; color: #fff; } #card3.correct { background: #5fcf80; color: #fff; } #card4.correct { background: #5fcf80; color: #fff; } #card5.correct { background: #5fcf80; color: #fff; } #card6.correct { background: #5fcf80; color: #fff; } .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"/> <div class="container"> <div class="row"> <div class="col-sm-12"> <!-- HTML here --> <div id="content" class="content"> <div class="row"> <div class="col-sm-12 col-md-4 col-lg-6"> <div id="cardTerms"> <div id="term-1">class</div> <div id="term-2">href</div> <div id="term-3">body</div> <div id="term-4">parent/child</div> <div id="term-5">comments</div> <div id="term-6">div</div> </div> </div> <div class="col-sm-12 col-md-8 col-lg-6"> <div id="cardDefs"> <div class="card"> <div class="card-body" id="def-1"> HTML elements can have one or more classes, separated by spaces. You can style elements using CSS by selecting them with their classes. </div> </div> <div class="card"> <div class="card-body" id="def-2"> Links tell the browser where to go using an href attribute, which stores a URL. </div> </div> <div class="card"> <div class="card-body" id="def-3"> The body is the container for all of a page's content. Comes after the <span class="code">&lt;head&gt;</span> tag, within the overall <span class="code">&lt;html&gt;</span> tag. </div> </div> <div class="card"> <div class="card-body" id="def-4"> An element that is an immediate descendent of another element or nested within another element is called a child. These become useful when using CSS child selectors and psuedo-elements. </div> </div> <div class="card"> <div class="card-body" id="def-5"> HTML comments are sometimes used in code to explain parts of the markup. They are similar to comments in other languages. Users do not see comments in their browser. </div> </div> <div class="card"> <div class="card-body" id="def-6"> A block level container (or 'division' of the web page) for content with no semantic meaning. </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="matchModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Great Work!</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> Awesome Job! Everything is matched up! Keep up the great work! </div> <div class="modal-footer"> <button type="button" class="btn btn-success btn-sm" data-dismiss="modal">Play Again</button> </div> </div> </div> </div>