Basically I want to transition the words in the div 'clickToContinue' from black to white, so that it fades into the other color. First I tried (directions at: http://ift.tt/1MCCcfu):
$("#logoBarImage").click(function(){
$("#paddingDiv").animate({
height: "0",
},1000);
$("#clickToContinue").animate({
color: "#FFFFFF",
}, 1000);
});
But no effect (except for the shrinking of the padding). So instead of using animation, I used directions (http://ift.tt/1KGfAaL) to get one class to transition into another (where the original class is 'clickToContinue' and the other is 'clicked' - of course the difference between the classes is a matter of color):
$("#logoBarImage").click(function(){
$("#paddingDiv").animate({
height: "0",
},1000);
$("#clickToContinue").toggleClass( "clicked", 1000, "linear" );
});
But still no transition, although paddingDiv still shrinks fine. The word just stays black.
Here are what I think the relevant parts of the code are that might be causing the problem; please fix so that the black may transition into white:
<!doctype html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-type" contents="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial scale=1" />
<script type="text/javascript" src="http://ift.tt/J5OMPW"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#clickToContinue {
text-shadow: 0.1em 0.1em #E5E5E5;
color: black;
}
.clicked {
color: white;
}
</style>
<body>
<div id="paddingDiv"> </div>
<div id="logoBarImage"><img src=""/></div>
<div id="clickToContinue">
<p>(please click on the logo to continue)</p>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire