如何使用过渡方法通过 JQuery 填充 div

【问题标题】：How to Fill the div Via JQuery with an Transitional Approach如何使用过渡方法通过 JQuery 填充 div
【发布时间】：2018-03-23 17:59:03
【问题描述】：

我正在尝试开发一个显示空垃圾箱的应用程序。

.content {
  min-height: auto;
}

.main {
  margin-top: 30px;
  line-height: 25px;
}

section {
  margin-top: 50px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.trash {
  background: rgba(64,231,173,1);
  background: -moz-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: -webkit-gradient(left top, right top, color-stop(1%, rgba(64,231,173,1)), color-stop(24%, rgba(68,237,168,1)), color-stop(69%, rgba(77,248,157,1)), color-stop(97%, rgba(82,255,151,1)));
  background: -webkit-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: -o-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: -ms-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: linear-gradient(to right, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40e7ad', endColorstr='#52ff97', GradientType=1 );
  width: 66px;
  height: 80px;
  display: inline-block;
  margin:0 auto;
  
  position: relative;
  -webkit-border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

.trash span {
  position: absolute;
  height: 12px;
  background: rgba(64,231,173,1);
  background: -moz-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: -webkit-gradient(left top, right top, color-stop(1%, rgba(64,231,173,1)), color-stop(24%, rgba(68,237,168,1)), color-stop(69%, rgba(77,248,157,1)), color-stop(97%, rgba(82,255,151,1)));
  background: -webkit-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: -o-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: -ms-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: linear-gradient(to right, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40e7ad', endColorstr='#52ff97', GradientType=1 );
  top: -19px;
  left: -10px;
  right: -10px;
	
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform: rotate(0deg);
  transition: transform 250ms;
  transform-origin: 19% 100%;
}

.trash span:after {
  content: '';
  position: absolute;
  width: 27px;
  height: 7px;
  background: rgba(64,231,173,1);
  background: -moz-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: -webkit-gradient(left top, right top, color-stop(1%, rgba(64,231,173,1)), color-stop(24%, rgba(68,237,168,1)), color-stop(69%, rgba(77,248,157,1)), color-stop(97%, rgba(82,255,151,1)));
  background: -webkit-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: -o-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: -ms-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: linear-gradient(to right, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40e7ad', endColorstr='#52ff97', GradientType=1 );
  top: -10px;
	
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform: rotate(0deg);
  transition: transform 250ms;
  transform-origin: 19% 100%;
  left: 27px;
}

.trash i {
  position:relative;
  width: 58px;
  height:70px;
  background:#fff;
  display:block;
  margin:5px auto;
  border-radius: 5px;
}

.trash:hover span {
  transform: rotate(-45deg);
  transition: transform 250ms;
}
<ion-card class="indicatorArea">
  <ion-card-header class="content">
    <section>
      <span class="trash">
        <span></span>
        <i></i>
      </span>
    </section>
  </ion-card-header>
  <ion-card-content class="main">
    Some Data Here
  </ion-card-content>
</ion-card>

我想要实现的是，我想将垃圾箱装满，直到垃圾箱的盖子打开。

示例：垃圾箱在 0% 时为空，颜色渐变为绿色。现在发生的事情是当我通过 JQuery 将 30 设置为百分比值时。现在 bin div 应该被填充到其当前状态的 30%。

当垃圾箱满到 100% 时，垃圾箱盖将打开，垃圾箱的状态将是 100%

但是，我在实施时遇到了问题。什么可能是实现它的好方法？此外，每当 bin 填充颜色时，它应该处于过渡状态。

【问题讨论】：

  • 你的例子不工作
  • 请在此处粘贴您的代码...
  • 我已经更新了@Max 的帖子
  • 我已经更新了帖子@PPL
  • 你应该发布你的 js 代码而不是 css 代码

标签： javascript jquery css sass


【解决方案1】： 

var fill = 0;
$("#button").on("click", function() {
  var value = parseInt($("#text").val());
  if(!isNaN(value)){
  if(value > 100 || value < 0)
  {
  alert("Please enter number between 0-100");
  return;
  }
  total = value;
  $(".trash").attr("data-fill", total);
  $(".filled").css({
    "height": total + "%"
  });
  $("#text").val("");
  if (total >= 100) {
    $(".trash span").addClass("open");
    $(".filled").css({
      "height": 100 + "%"
    });
  } else {
    $(".trash span").removeClass("open");
  }
  if(total > 0){
  var srColor= 100 - total;
  $("span.trash").css({
      "background": "linear-gradient(to top, red "+total+"%, rgba(68, 237,  168, 1) "+srColor+"%)"
    });
   }else{
   $("span.trash").css({
      "background": ""
    });
   }
 }else{
 alert("Please enter correct number!!");
 }
})
.content {
  min-height: auto;
}

.main {
  margin-top: 30px;
  line-height: 25px;
}

.indicatorArea {
  background: red;
  color: #ffffff;
}

.trash i.filled {
  content: "";
  left: 0;
  bottom: 0;
  right: 0;
  background: red;
  position: absolute;
  transition: all .5s ease;
  height: 0;
  margin: 0;
}

section {
  /* background: #dce7eb; */
  margin-top: 50px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.trash {
  background: rgba(64, 231, 173, 1);
  background: -moz-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -webkit-gradient(left top, right top, color-stop(1%, rgba(64, 231, 173, 1)), color-stop(24%, rgba(68, 237, 168, 1)), color-stop(69%, rgba(77, 248, 157, 1)), color-stop(97%, rgba(82, 255, 151, 1)));
  background: -webkit-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -o-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -ms-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: linear-gradient(to right, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40e7ad', endColorstr='#52ff97', GradientType=1);
  width: 66px;
  height: 80px;
  display: inline-block;
  margin: 0 auto;
  position: relative;
  -webkit-border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

.trash:after {
  content: 'Your iBin Status 'attr(data-fill)'%';
  position: absolute;
  left: -23px;
  right: 0;
  bottom: -20px;
  width: 300px;
  color: black;
}

.trash span {
  position: absolute;
  height: 12px;
  background: rgba(64, 231, 173, 1);
  background: -moz-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -webkit-gradient(left top, right top, color-stop(1%, rgba(64, 231, 173, 1)), color-stop(24%, rgba(68, 237, 168, 1)), color-stop(69%, rgba(77, 248, 157, 1)), color-stop(97%, rgba(82, 255, 151, 1)));
  background: -webkit-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -o-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -ms-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: linear-gradient(to right, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40e7ad', endColorstr='#52ff97', GradientType=1);
  top: -19px;
  left: -10px;
  right: -10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform: rotate(0deg);
  transition: transform 250ms;
  transform-origin: 19% 100%;
}

.trash span:after {
  content: '';
  position: absolute;
  width: 27px;
  height: 7px;
  background: rgba(64, 231, 173, 1);
  background: -moz-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -webkit-gradient(left top, right top, color-stop(1%, rgba(64, 231, 173, 1)), color-stop(24%, rgba(68, 237, 168, 1)), color-stop(69%, rgba(77, 248, 157, 1)), color-stop(97%, rgba(82, 255, 151, 1)));
  background: -webkit-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -o-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -ms-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: linear-gradient(to right, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40e7ad', endColorstr='#52ff97', GradientType=1);
  top: -10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform: rotate(0deg);
  transition: transform 250ms;
  transform-origin: 19% 100%;
  left: 27px;
}

.trash i {
  position: relative;
  width: 58px;
  height: 70px;
  background: #fff;
  display: block;
  margin: 5px auto;
  border-radius: 5px;
}

.trash span.open {
  transform: rotate(-45deg);
  transition: transform 250ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="text" type="text" placeholder="Enter value here...">
<input type="button" id="button" value="Fill">
<ion-card class="indicatorArea">
  <ion-card-header class="content">
    <section>
      <span class="trash" data-fill="0">
        <span></span>
      <i><i class="filled"></i></i>
      </span>
    </section>
  </ion-card-header>
</ion-card>

请检查此代码。如果我遗漏了什么，请告诉我。

更新

var fill = 0;
$("#button").on("click", function() {
  var value = parseInt($("#text").val());
  if(!isNaN(value)){
  if(value > 100 || value < 0)
  {
  alert("Please enter number between 0-100");
  return;
  }
  total = value;
  $(".trash").attr("data-fill", total);
  $(".filled").css({
    "height": total + "%"
  });
  $("#text").val("");
  if (total >= 100) {
    $(".trash span").addClass("open");
    $(".filled").css({
      "height": 100 + "%"
    });
  } else {
    $(".trash span").removeClass("open");
  }
  if(total > 0){
  var srColor= 100 - total;
  $("span.trash").css({
      "background": "red"
    });
   }else{
   $("span.trash").css({
      "background": "rgba(64, 231, 173, 1)"
    });
   }
 }else{
 alert("Please enter correct number!!");
 }
})
.content {
  min-height: auto;
}

.main {
  margin-top: 30px;
  line-height: 25px;
}

.indicatorArea {
  background: red;
  color: #ffffff;
}

.trash i.filled {
  content: "";
  left: 0;
  bottom: 0;
  right: 0;
  background: red;
  position: absolute;
  transition: all .5s ease;
  height: 0;
  margin: 0;
}

section {
  /* background: #dce7eb; */
  margin-top: 50px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.trash {
  background: rgba(64, 231, 173, 1);
  background: -moz-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -webkit-gradient(left top, right top, color-stop(1%, rgba(64, 231, 173, 1)), color-stop(24%, rgba(68, 237, 168, 1)), color-stop(69%, rgba(77, 248, 157, 1)), color-stop(97%, rgba(82, 255, 151, 1)));
  background: -webkit-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -o-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -ms-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: linear-gradient(to right, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40e7ad', endColorstr='#52ff97', GradientType=1);
  width: 66px;
  height: 80px;
  display: inline-block;
  margin: 0 auto;
  position: relative;
  -webkit-border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

.trash:after {
  content: 'Your iBin Status 'attr(data-fill)'%';
  position: absolute;
  left: -23px;
  right: 0;
  bottom: -20px;
  width: 300px;
  color: black;
}

.trash span {
  position: absolute;
  height: 12px;
  background: rgba(64, 231, 173, 1);
  background: -moz-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -webkit-gradient(left top, right top, color-stop(1%, rgba(64, 231, 173, 1)), color-stop(24%, rgba(68, 237, 168, 1)), color-stop(69%, rgba(77, 248, 157, 1)), color-stop(97%, rgba(82, 255, 151, 1)));
  background: -webkit-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -o-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -ms-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: linear-gradient(to right, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40e7ad', endColorstr='#52ff97', GradientType=1);
  top: -19px;
  left: -10px;
  right: -10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform: rotate(0deg);
  transition: transform 250ms;
  transform-origin: 19% 100%;
}

.trash span:after {
  content: '';
  position: absolute;
  width: 27px;
  height: 7px;
  background: rgba(64, 231, 173, 1);
  background: -moz-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -webkit-gradient(left top, right top, color-stop(1%, rgba(64, 231, 173, 1)), color-stop(24%, rgba(68, 237, 168, 1)), color-stop(69%, rgba(77, 248, 157, 1)), color-stop(97%, rgba(82, 255, 151, 1)));
  background: -webkit-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -o-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: -ms-linear-gradient(left, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  background: linear-gradient(to right, rgba(64, 231, 173, 1) 1%, rgba(68, 237, 168, 1) 24%, rgba(77, 248, 157, 1) 69%, rgba(82, 255, 151, 1) 97%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40e7ad', endColorstr='#52ff97', GradientType=1);
  top: -10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform: rotate(0deg);
  transition: transform 250ms;
  transform-origin: 19% 100%;
  left: 27px;
}

.trash i {
  position: relative;
  width: 58px;
  height: 70px;
  background: #fff;
  display: block;
  margin: 5px auto;
  border-radius: 5px;
}

.trash span.open {
  transform: rotate(-45deg);
  transition: transform 250ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="text" type="text" placeholder="Enter value here...">
<input type="button" id="button" value="Fill">
<ion-card class="indicatorArea">
  <ion-card-header class="content">
    <section>
      <span class="trash" data-fill="0">
        <span></span>
      <i><i class="filled"></i></i>
      </span>
    </section>
  </ion-card-header>
</ion-card>

【讨论】：

  • 代码运行良好。有什么方法可以相应地将垃圾的颜色从绿色更改为红色？我的意思是我在外部填充鞭打时指定的颜色也应该能够适应相同的颜色。有没有可能的方法或任何技巧？
  • 您的代码中有错误，但请查看我输入的任何数字，它不应该得到加法或减法。垃圾箱将根据输入的数字重置并填充颜色，您当前的代码会进行加减运算。请更新您的代码，以便我可以标记它:)
  • 我已经为第二条评论编辑了我的代码。你能详细解释一下你的第一条评论吗？ @开发者
  • 我的第一条评论意味着最初我的垃圾箱是绿色的，现在垃圾箱内的颜色是红色，所以我希望整个垃圾箱适应红色或我在垃圾箱内提供的任何其他颜色跨度>
  • 我再次编辑了我的代码。看到它看起来不错然后把整个垃圾箱变成红色？你的意见？ @开发者
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-06-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode