jQuery delay function

[raul8]

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

[hielo]

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>

[ckchaudhary]

this will work

$(".tabButton").click(function() {
 $(this).css("background-color", "white").delay(500).queue(function () {
                    $(this).css("background-color", "black")
                    $(this).dequeue();
                });
 
});