My jQuery code successfully animates the height and width of divs, but it doesn't seem to be working for the text color within those divs. I'm not sure what I'm missing here. Below is the full code snippet, with lines 9 and 12 being the ones that are causing issues.
Code Snippet:
$(document).ready(function() {
$(".postit_family").hover(function() {
$(this).animate({
height: "138",
width: "150",
left: "-=10",
top: "-=9",
'line-height': "132px"
}, "fast");
$("span").animate({
color: "red"
}, "fast");
}, function() {
$(this).animate({
height: "120",
width: "130",
left: "+=10",
top: "+=9",
'line-height': "118px"
}, "fast");
$("span").animate({
color: "black"
}, "fast");
});
});a:hover {
text-decoration: none !important;
}
#container {
width: 780px;
height: 673px;
background-image: url("https://epwork.ep.corp/wg/Residuals/Images1/iMac.jpg");
position: relative;
}
.postit_family {
width: 130px;
height: 120px;
text-align: center;
line-height: 118px;
position: absolute;
}
.postit_family span {
display: inline-block;
vertical-align: middle;
line-height: normal;
font-family: Raleway;
text-align: center;
color: #67768A;
width: 90px;
font-size: 18px;
}
/* Additional CSS styles for postits go here */
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
// JQuery and jQuery UI script sources
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js">
</script>