javascript - 检查颜色后淡入颜色输入

Question

所以我有一个带有某种颜色类型的输入。我想让它在用户按下“确定”后立即淡出。

代码:

/* ----- 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);
  });
});

/* ----- 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;
}

<!----- 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>

那我怎么可能一选择颜色就让它淡出呢!

Answer 1

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

代码:

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

<小时/>

您可以查看功能齐全的 jsFiddle here或下面的片段↓

片段:

/* ----- 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);
});

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

<!----- 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>