拖放完成后如何使两个元素褪色？

Question

Codepen参考- Codepen

我正在开发拖放应用程序。放置完成后，我将可拖动对象设置为从红色变为绿色，然后消失。

可拖动对象后面的可放置对象也需要淡出。我尝试了几种不同的方法来将淡入淡出技术应用于可拖动和可放置的控件，但我只是无法到达目的地。

// 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>