I am completely baffled as to why this simple jQuery script is not working. I literally copied and pasted the code from another project of mine (in which the code works) and just changed the class tag.
<html>
<head>
<title>test page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.click_item').click(
function() {
$(this).animate({background: '#ffffff'}, 200);
},
function() {
$(this).animate({background: '#d0d0d0'}, 200);
}
);
})
</script>
<style type="text/css">
#one {
height: 300px;
width: 1000px;
background-color: #a0a0a0;
}
.click_item {
width: 100px;
height: 30px;
margin: 0px auto;
margin-bottom: 10px;
background: #d0d0d0;
-moz-transition: background linear;
-webkit-transition: background linear;
}
</style>
</head>
<body>
<div id="one">
<div id="map_options_box">
<div id="kml1" class="click_item">item 1</div>
<div id="kml2" class="click_item">item 2</div>
</div>
</div>
</body>
I also tried using the #kml1 and #kml2 ID tags instead of class and ‘this’ tags, as well as replacing the click function with hover and toggle,still didn’t work. I’m not receiving any errors in the console either.
You will need to include the jQuery color animations plugin., because native jquery does not support this feature