检查颜色后褪色输入

Question

所以我输入了一种颜色。一旦用户按下确定，我想让它淡出。

代码：

＆＃13;

＆＃13;

/* ----- JavaScript ----- */
$(document).ready(function() {
  $(".square").click(function() {
    $("#rangebar,#colorbar").fadeToggle(250);
  });
  $("#rangebar").mouseup(function() {
    $("#rangebar,#colorbar").fadeOut(250);
  });
  $("#rangebar").mousemove(function() {
    var rangeval = $("#rangebar").val();
    var rangeval = rangeval / 2;
    $(".square").css("border-radius", rangeval);
  });
});

＆＃13;

/* ----- CSS ----- */
.square {
  height: 100px;
  width: 100px;
  background: black;
  margin: 40px 0 5px 10px;
  cursor: pointer;
}
#rangebar {
  cursor: pointer;
}
#colorbar {
  position: relative;
  left: 5px;
  bottom: 5px;
}

＆＃13;

<!----- HTML ---->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="square"></div>
  <input type="range" name="range" id="rangebar" value="0">
  <input type="color" name="color" id="colorbar">
</section>

＆＃13;

＆＃13;

＆＃13;

一旦我选择了一种颜色，我怎么能让它淡出！

Answer 1

您可以使用change事件轻松实现这一点，该事件在特定元素值发生变化时触发。

<强>代码：

/* 'Change' will make the 'colour' input disappear when 'OK' is pressed. */
$("#colorbar").change(function() {
  $(".square").css("backgroundColor", this.value);
  $(this).fadeOut(250);
});

您可以查看完全正常工作的jsFiddle here或下面的代码段↓

<强>段：

＆＃13;

＆＃13;

/* ----- JavaScript ----- */
$(document).ready(function() {
  $(".square").click(function() {
    $("#rangebar,#colorbar").fadeToggle(250);
  });
  $("#rangebar").mouseup(function() {
    $("#rangebar,#colorbar").fadeOut(250);
  });
  $("#rangebar").mousemove(function() {
    var rangeval = $("#rangebar").val();
    var rangeval = rangeval / 2;
    $(".square").css("border-radius", rangeval);
  });
});

/* My addition */
$("#colorbar").change(function() {
  $(".square").css("backgroundColor", this.value);
  $(this).fadeOut(250);
});

＆＃13;

/* ----- CSS ----- */
.square {
  height: 100px;
  width: 100px;
  background: black;
  margin: 40px 0 5px 10px;
}
.square,
#rangebar {
  cursor: pointer;
}
#colorbar {
  position: relative;
  left: 5px;
  bottom: 5px;
}

＆＃13;

<!----- HTML ---->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="square"></div>
  <input type="range" name="range" id="rangebar" value="0">
  <input type="color" name="color" id="colorbar">
</section>

＆＃13;

＆＃13;

＆＃13;