JavaScript Tutorial/jQuery/fadeTo
Версия от 21:52, 25 мая 2010; (обсуждение)
Содержание
Fade to a certain opacity
<source lang="javascript">
<html>
<head> <style> .test{ border: 1px solid red; } </style> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:parent").fadeTo(1500, 0.3); }); </script>
</head> <body>
paragraph in div
div
</body>
</html></source>
Fade to callback
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").fadeTo(250, Math.random(),function () { alert("done"); }); }); </script> </head> <body> <body>
Click me
</body>
</html></source>
Fade to in milliseconds
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").fadeTo(250, Math.random()); }); </script> </head> <body> <body>
Click me
</body>
</html></source>
Fade to random
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").fadeTo("fast", Math.random());
}); </script> </head> <body> <body>
Click me
</body>
</html></source>
fadeTo(speed, opacity, callback): Only the opacity is adjusted for this animation
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:first").click(function () { $(this).fadeTo("slow", 0.33); }); }); </script> </head> <body> <body>
asdf
</body>
</html></source>
Fast fade to
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").fadeTo("fast", Math.random());
}); </script> </head> <body> <body>
Click me
</body>
</html></source>
Slow fade to
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").fadeTo("slow", 0.33);
}); </script> </head> <body> <body>
Click me
</body>
</html></source>