Hi,

I want to change color of a <div> element after some delay:
For. e.g:
Initially div is in Orange Color.
Then onClick it will become White
then after half second delay, it will become Black.
But it is not working.
It becomes black on the first click & White on second
Code:

<script type="text/javascript">
$(".tabButton").click(function() {
			$(this).css("background-color", "white").delay(500, function() {
				$(this).css("background-color", "black");
			})
		});
</script>
<style>
.tabButton {
	float: left;
	position: absolute;
	width: 50px;
	height: 20px;
	top: 150px;
	border-width: 1px;
	border-style: solid;
	border-color: black;
	text-align: center;
	font-style: italic;
	background-color: orange;
}
</style>

Thanks

before you begin the delay, try "capturing/recording" a reference to " this " in some variable so that your delayed function actually knows what " this " means:

$(".tabButton").click(function() {
var self=this;
			$(self).css("background-color", "white").delay(500, function() {
				$(self).css("background-color", "black");
			})
		});
</script>

this will work

$(".tabButton").click(function() {
 $(this).css("background-color", "white").delay(500).queue(function () {
                    $(this).css("background-color", "black")
                    $(this).dequeue();
                });
 
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.