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

您可以将jquery .swipe事件用于移动版，而对于桌面版，您可以使用.click事件：

.fadeOut() 将使用动画效果隐藏div。

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

OR

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

Answer 2

虽然我对动画没有太多了解（你知道在w3schools找到了很多）或者刷卡我可以给你桌面代码。

$(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>

向右滑动时删除div

3 个答案: