NSA
sudo apt-get thefuckout.tar.gz
- Dec 9, 2011
- 715
- 86
Hey guys,
I'm having trouble with -webkit-transition.
I have the transition working, the trouble is, it only works with :hover so I can only get it to transition into the set :hover values and not back into the original values.
I have a border around some text set at 10px and it slowly transitions to 20px but when the user's mouse leave's the text, it just flashes back to 10px instead of transitioning.
Is there a fix for this?
EDIT: I have tried using jQuery 'mouseenter' & 'mouseleave'.
The code I am using:
I'm having trouble with -webkit-transition.
I have the transition working, the trouble is, it only works with :hover so I can only get it to transition into the set :hover values and not back into the original values.
I have a border around some text set at 10px and it slowly transitions to 20px but when the user's mouse leave's the text, it just flashes back to 10px instead of transitioning.
Is there a fix for this?
EDIT: I have tried using jQuery 'mouseenter' & 'mouseleave'.
The code I am using:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<style>
#navigation_bar{
border:groove;
border-radius:13px;
padding:0px;
display:inline-block;
padding-right:4%;
box-shadow: 10px 10px 5px #888888;
background-color:red;
}
li{
border:solid;
border-color:red;
border-radius:10px;
list-style:none;
background-color:red;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
display:inline-block;
padding:10px;
margin-left:5px;
-webkit-transition:background-color 4s;
-webkit-transition:border-color 4s; /* Safari and Chrome */
-webkit-transition:border-radius 2s;
}
li:hover{
background-color:#EA0000;
border:solid;
border-color:#EA0000;
border-radius:90px;
}
a{
text-decoration:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="navigation_bar">
<ul>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://facebook.com/">Facebook</a></li>
</ul>
</div>
<script type="text/javascript">
</script>
</body>
</html>
