削除divの右

Question

こんにちはへのスワイプは、私が持っている、フォローのdiv：

• デスクトップ：

  .wrapper { 
   
      width: 300px; 
   
      border: 1px solid black; 
   
      padding: 10px; 
   
  } 
   
  .swipe { 
   
      width: 100px; 
   
      height: 30px; 
   
      margin-top: auto; 
   
      margin-bottom: auto; 
   
      background-color: grey; 
   
      color: white; 
   
      font-family: Arial; 
   
      text-align: center; 
   
      line-height: 30px; 
   
  } 
   
  .swipe:hover { 
   
      cursor: pointer; 
   
      background-color: darkgrey; 
   
  }

  <div class="wrapper"> 
   
      <div class="swipe">Swipe me</div> 
   
  </div>

  は、私は、これは二つの異なる方法でDIV削除したいです：私はそれをクリックすると、小さなアニメーションでフェードアウトする必要があります。

• タブレット：タッチして右にスワイプすると、デスクトップ上と同じアニメーションでも削除されます。

どうすればいいですか？解決方法はjQueryまたは可能な場合はangularJSでなければなりません。

ありがとうございました。

Answer 1

あなたは、モバイル版のために、あなたが.clickイベントに使用できるデスクトップのためのjQuery .swipeイベントを使用することができます。

.fadeOut() は、アニメーション効果を使用して非表示のdivになりますが。

$(".swipe").on("swipe",function(){ 
     $(this).fadeOut(500); 
}); 

OR

$(".swipe").on("click",function(){ 
     $(this).fadeOut(500); 
}); 

Answer 2

私はアニメーションについてはあまり知識を持っている（あなたがW3Schoolsのでそれらの多くを見つける知っている）か、私はあなたのデスクトップ1のコードを与えることができますスワイプしませんが。

$(document).ready(function(){ 
$(".swipe".on("click",function(){ 
    $(".swipe").css("display","none"); 
}) 
}) 

Answer 3

あなただけのhtmlファイルにこのスクリプトを配置し、またこんにちは、私はこれをみますと、あなたは再び書くよりも、jqueryのライブラリ

<script> 
$(document).ready(function(){ 
    $(".swipe").click(function(){ 
     $(".swipe").fadeOut(3000); 
    }); 
}); 
</script>