Change an element's opacity inside an animated div
Hi, I am new to jQuery and I have no idea how to fix a problem. Hope you can help me out.
I have a paragraph inside a div and I want it to be 100% visible, not to inherit opacity from the div. I have posted my code below:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
$(document).ready(function(e) {
$("button").click(function(e) {
$("div").animate({marginLeft:'200px',marginTop:'200px',opacity:'0.3'},2000,function(){
$("p").show().animate({opacity:'5'})
});
});
});
</script>
</head>
</
<body>
<button>Click me</button>
<div style="position:absolute; width:200px; height:150px; background:#069;">
<p style="display:none; opacity:5">Some text</p>
</div>
</body>
</html>