您的位置：首页 > Web前端 > JQuery

jquery动画函数

2013-05-06 20:21 211 查看

<!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">

<head>

<title></title>

<style type="text/css">

.sh

{

width:100px;

height:100px;

border:2px solid Orange;

}

</style>

<script src="Jquery1.7.js" type="text/javascript"></script>



<script type="text/javascript">

$(function () {

$('#b1').click(function () {

$('#img1').fadeOut(2000, function () {

$('#b1').val('变了诶！')

})

})

$('#b2').click(function () {

$('#img1').fadeIn(2000, function () {

$('#b2').val('变了诶')

})

})

$('#b3').click(function () {

$('#img1').fadeTo(2000, 0.3, function () {

$('#b3').val('介个好黑');

})

})

})

</script>



<script type="text/javascript">

$(function () {

$('#b4').click(function () {

$('#img1').slideUp(2000);

})

$('#b5').click(function () {

$('#img1').slideDown(2000);

})

$('#b6').click(function () {

$('#img1').slideToggle(2000);

})

})

</script>



<script type="text/javascript">

$(function () {

var zhi = $('#ah input:checked').val();

$('#ah input').click(function () {

$('#img1').fadeTo(2000, $('#ah input:checked').val())

})

})

</script>

</head>

<body>

<div><input type="button" id="b1" value="淡出" /><input type="button" id="b2" value="淡入" /><input type="button" id="b3" value="淡到" /></div>

<div><input type="button" id="b4" value="收起" /><input type="button" id="b5" value="拉出来" /><input type="button" id="b6" value="多用" /></div>

<div><img src="imgs/1.jpg" id="img1" class="sh"/></div>

<div id="ah"><input type="radio" value="0" id="0" name="1" />0<input type="radio" value="0.1" id="0.1" name="1" />0.1

<input type="radio" value="0.2" id="0.2" name="1" />0.2<input type="radio" value="0.3" id="0.3" name="1" />0.3

<input type="radio" value="0.4" id="0.4" name="1" />0.4<input type="radio" value="0.5" id="0.5" name="1"/>0.5

<input type="radio" value="0.6" id="0.6" name="1"/>0.6<input type="radio" value="0.7" id="0.7" name="1" />0.7

<input type="radio" value="0.1" id="0.8" name="1"/>0.8<input type="radio" value="0.9" id="0.9" name="1"/>0.9

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航