颜色检查后褪色颜色输入

Question

所以我有一种颜色的输入。我希望在用户按下ok后尽快淡出。

代码：

/* ----- 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事件，您可以非常轻松地实现该事件，该事件在其值发生更改时触发特定元素。

代码：

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

---

您可以检查出一个完全工作的jsfiddlehere或低于↓

摘录的片断：

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