jquery的动画效果animate附加一个滚动回到页面的例子_jquery animate滚动

作者：凡人多烦事01 | 2024-04-08 16:35:18

踩

jquery animate滚动

动画给人带来不错的视觉效果，jquery中的animate()方法让那个页面增加了很好的视觉效果

show() and hidden()：根据词的意思不难理解，就是显示与隐藏

这两个方法的含义其实与css中的display效果一样，在css中我们将某些元素隐藏起来，$("element").css（“display”，“none”），这个个属性的设置可以换成$("element").hidden();相应的show()与display:block一样效果，这样减少了代码量。如果在调用的时候出现一些动画效果，那么就为这两个方法设置一下速度参数。$("element").show("slow");“slow”相当于是600毫秒，也就是在600毫秒内元素将慢慢的显示出来，里面的参数可以自己设定。

fadeIn与fadeOut：设置元素的透明度，fadeOut是改变元素的透明度来是元素消失，fadeIn相反

html:

<h5 class="body">下面插播一条新闻，在东部地区发现了。。。。。。</h5>

jquery:

$(document).ready(function() {

$("#panel h5.head").toggle(function(){

$(this).next().fadeOut(); //淡出效果
},function(){
$(this).next().fadeIn(); //淡入效果
});
});

slideUp与slideDown:设置元素的高度，slidDown是有上至下显示延伸显示，slidUp是有下至上缩短显示

jquery:将上面的jquery元素更改为：

$(document).ready(function() {

$("#panel h5.head").toggle(function(){

$(this).next().slideDown("slow");
},function(){
$(this).next().slideUp("slow");
});
});

slidToggle与fadeToggle这两个方法是对slideUp与slideDown、fadeIn与fadeOut两者之间的切换。

自定义动画animate()

语法结构animate(param,speed,callback)

param:是一个样式属性及值得映射，比如{property：“value1”，property：“valu21”。。。。。}

speed:速度参数，可选

callback:在完成动画时执行的函数，可选

引用上边的元素，给h5添加动画效果

$("#panel h5.head").click(){

$(this).animate(left:"100px",500);

} 将元素在0.5秒向右移动100像素

动画的累加，将上面的语句改为

$("#panel h5.head").click(){

$(this).animate(left:"+=200px",500);

}

在当前位置累加200像素

前面讲过param的参数可以有多个，所以代码再次修改为

$("#panel h5.head").click(){

$(this).animate({left:"+=200px",height:"100px"}，500);

}

这样一来元素既可以移动也可以变高了

动画的回调就是将动画执行完成以后发出的一个动作，在上面的基础可以这样改

$("#panel h5.head").click(){

$(this).animate({left:"+=200px",height:"100px"}，500，function（）{

$(this),css("color","pink");

});

} 执行完动画后将字体颜色改变

停止动画

停止动画stop()

语法：stop([clearQueue],[gotoEnd])两个参数都是可选的，为Boolean值，clearQueue代表是否要清空未执行完的动画，gotoEnd代表是否直接将正在运行的动画跳转到末状态，如果直接使用stop()方法，则会立即停止当前的动画。

html: 定义一个块

<div id="block"> </div>

css:

<style type="text/css">

#block{

position:relative;

width:100px;

height:100px;

border:2px solid #0050D0;

background:#969696;

cursor:pointer;}

</style>

jquery:

$(document).ready(function(){

$("#block").click(function(){

$(this).animate({left:"+=100px",width:"+=100px",opacity:"0.5"},600)

.animate({top:"200px",width:"160px"},1000,function(){

$(this).css({border:"4px solid red",opacity:"1"});

});

});

$("#block").hover(function(){

$(this).stop(true,true)

.animate({width:"+=100px"},600)

.animate({height:"+=100px"},600);

},function(){

$(this).stop(true,true)

.animate({width:"60px"},600)

.animate({height:"30px"},600);

});

});

下面的例子是通过anminate()方法滚动回到页面顶部

创建一个页面，body部分，下面有好多↓就是i为了能让页面出滚动条，着实有些浪费

<div id="pagewrap">

↓ scroll down

↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓

/**滚动部分**/



<a href="#top">Back to Top</a>



</div>

</body>

css部分：接触的css不多，里面有些属性自己也是查过资料才略懂的，这里就啰嗦一下。为了是回到顶部的按钮位置不变，需要将back to top位置position为成fixed，border-radius属性是将背景添加圆角边框，text-transform设置文本的大小写，transition是属性改变时，变换的效果时间的延迟。友情提示：如果有幸能用到该例子，请注意下面绿色的部分，此处是添加一个背景图片，这里自己要找一张图片添加自己的路径，要不然。。。。你懂得

<style>

body {

margin: 30px auto;

}

#pagewrap {

margin: 0 auto;

width: 600px;

padding-left: 150px;

position: relative;

}

/*Back to top button */

#back-top {

position: fixed;

bottom: 30px;

margin-left: -150px;

}

#back-top a {

width: 108px;

display: block;

text-align: center;

text-transform: uppercase;

text-decoration: none;

transition: 1s;

}

#back-top a:hover {

color: #000;

}

#back-top span {

width: 108px;

height: 108px;

display: block;

margin-bottom: 7px;

background: #ddd url(up-arrow.png) no-repeat center center;

border-radius: 15px;

transition: 1s;

}

#back-top a:hover span {

background-color: #777;

}

</style>

jquery部分：通过滚动条的位置来设置back to top按钮的显示，以及返回顶部的操作。

头部引入的文件：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function() {
$("#back-top").hide();
$(window).scroll(function() {
if($(window).scrollTop()>100){
$("#back-top").show();
}
else {

$("#back-top").hide();
}
});

$("#back-top").click(function(){
//$(window).scrollTop(0);
//$(document).animate({scrollTop:0},1000);
$("body,html").animate({scrollTop:0},1000);
$("#back-top").hide();
return false;
});
});
</script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/386839