i have animated div in html. it is adding 1px to div in every second, now i want if my div’s right position reach 15 then one alert box should say “hiii”. i have made a small function but it is not working.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.wrap { border:solid 1px #F00; width:1000px; height:300px; overflow:hidden; position:relative}
.box { width:200px; height:200px; background:#00F; position:absolute}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
var left=5;
$(function aniMation(){
$('.box').css({right:++left})
setTimeout(aniMation,1000)
})
$(function (){
var box= $(".box").css("right")
if(box=="10px"){
alert("hiii")
}
})
</script>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
I don’t think you’re actually calling that function other than on page load!
From the docs:
jQuery( callback )
A shorthand for $(document).ready().
Allows you to bind a function to be executed when the DOM document has finished loading.
I’ve checked the lines you call in the Console of my browser (Google Chrome) and they seem to work. The problem is that the function is only executed once on page load, which is before the check is true.