css 背景和边框DIV不会淡出

q9rjltbz 于 2023-04-22 发布在其他

关注(0)|答案(3)|浏览(112)

我在FadeOut函数上有个问题。它只会淡出内容，而不会淡出白色背景和边框。我注意到如果我删除while循环之外的.product-div-container，它就能正常工作。
但是我需要那个DIV在所有产品后面放一个盒子阴影。我不喜欢每个产品上的盒子阴影，因为我有一个淡入/淡出功能，当数量变化时，产品DIV上的盒子阴影。然后你会在另一个div上看到丑陋的盒子阴影。
那么，如何在不删除.product-div-container的情况下淡出.whole-product-div呢？

$(".delete-product-cart").click(function() {
  $('.whole-product-div[data-id="' + $(this).data('id') + '"]').fadeOut(1300, function() {
    $(this).remove();
  });
});

.product-div-container {
  box-shadow: 0px 0px 30px 0px grey;
}

.styling-cart {
  background: white;
  border: 1px solid grey;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='product-div-container' class='product-div-container'>
  <div class='col-md-12 styling-cart whole-product-div' data-id='1'>
    <a class='delete-product-cart' data-id='1'>Delete</a>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/61394839/background-and-border-div-doesnt-fade-out

3条答案

按热度按时间

hs1ihplo1#

你可以试试这个：

$(".delete-product-cart").click(function(){
    $('.whole-product-div[data-id="'+id+'"]')
        .removeClass('whole-product-div')
        .fadeOut(1300, function(){ 
           $(this).remove();
         });
  });

在淡出之前立即移除长方体阴影

赞(0）回复(0）举报 2023-04-22

ulydmbyx2#

这里有一个更新的答案，它给予了我认为（更接近）所需的效果-.product-div-container上的CSS颜色背景是唯一需要更改的：
JS：

$(".delete-product-cart").click(function() {
  $('.whole-product-div[data-id="' + $(this).data('id') + '"]').fadeOut(1300, function() {
    $(this).remove();
  });
});

CSS：

.product-div-container {
  box-shadow: 0px 0px 30px 0px grey;
  min-height: 1px;
  background: yellow;
}

.styling-cart {
  background: white;
  border: 3px solid grey;
}

.styling-cart:nth-child(odd) {
  border-color: red;
}

html {background:yellow;}

HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='product-div-container' class='product-div-container'>
  <div class='col-md-12 styling-cart whole-product-div' data-id='1'>
    <a class='delete-product-cart' data-id='1'>Delete</a>
  </div>
  <div class='col-md-12 styling-cart whole-product-div' data-id='2'>
    <a class='delete-product-cart' data-id='2'>Delete</a>
  </div>
  <div class='col-md-12 styling-cart whole-product-div' data-id='3'>
    <a class='delete-product-cart' data-id='3'>Delete</a>
  </div>
  <div class='col-md-12 styling-cart whole-product-div' data-id='4'>
    <a class='delete-product-cart' data-id='4'>Delete</a>
  </div>
  <div class='col-md-12 styling-cart whole-product-div' data-id='5'>
    <a class='delete-product-cart' data-id='5'>Delete</a>
  </div>
  <div class='col-md-12 styling-cart whole-product-div' data-id='6'>
    <a class='delete-product-cart' data-id='6'>Delete</a>
  </div>
  <div class='col-md-12 styling-cart whole-product-div' data-id='7'>
    <a class='delete-product-cart' data-id='7'>Delete</a>
  </div>
</div>

一个链接到分叉的小提琴：https://jsfiddle.net/26a8hd7k/

赞(0）回复(0）举报 2023-04-22

a1o7rhls3#

当你点击delete按钮的时候，这将淡出每个div，并留下容器的阴影。
您可以使用按钮的data属性来定位其父按钮。

$(".delete-product-cart").click(function() {
  // Here we use $(this) to reference the a tag's data attribute so it targets its parent div.
  $('.whole-product-div[data-id="' + $(this).data('id') + '"]').fadeOut(1300, function() {
    $(this).remove();
  });
});

body {
  background-color: purple !important;
}

.product-div-container {
  box-shadow: 0px 0px 30px 0px grey;
}

.styling-cart {
  background: white;
  border: 3px solid grey;
  background: yellow;
}

.styling-cart:nth-child(odd) {
  border-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id='product-div-container' class='product-div-container'>
    <div class='col-md-12 styling-cart whole-product-div' data-id='1'>
      <a class='delete-product-cart' data-id='1'>Delete</a>
    </div>
    <div class='col-md-12 styling-cart whole-product-div' data-id='2'>
      <a class='delete-product-cart' data-id='2'>Delete</a>
    </div>
    <div class='col-md-12 styling-cart whole-product-div' data-id='3'>
      <a class='delete-product-cart' data-id='3'>Delete</a>
    </div>
    <div class='col-md-12 styling-cart whole-product-div' data-id='4'>
      <a class='delete-product-cart' data-id='4'>Delete</a>
    </div>
    <div class='col-md-12 styling-cart whole-product-div' data-id='5'>
      <a class='delete-product-cart' data-id='5'>Delete</a>
    </div>
    <div class='col-md-12 styling-cart whole-product-div' data-id='6'>
      <a class='delete-product-cart' data-id='6'>Delete</a>
    </div>
    <div class='col-md-12 styling-cart whole-product-div' data-id='7'>
      <a class='delete-product-cart' data-id='7'>Delete</a>
    </div>
  </div>
</body>

赞(0）回复(0）举报 2023-04-22

我来回答

css 背景和边框DIV不会淡出

3条答案

相关问题

热门标签

最新问答