0

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

3
Contributors
2
Replies
3
Views
5 Years
Discussion Span
Last Post by ckchaudhary
0

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

this will work

$(".tabButton").click(function() {
 $(this).css("background-color", "white").delay(500).queue(function () {
                    $(this).css("background-color", "black")
                    $(this).dequeue();
                });
 
});
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.