顏色檢查後褪色顏色輸入

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>