正文
jquerydiv效果,jquerydiv显示与隐藏
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
Jquery效果，多个DIV,点击切换文字，变换背景颜色，再次点击或者点击其他div，文字和背景色变回来
css:
/*原来的背景色*/
.bg{background:'red'}
/*要切换的背景色*/
.bg_click{background:'green'}
js:
$('div').on('click',function(){
var $div = $(this);
var $others = $div.siblings();
if($div.hasClass('bg')){
$div.removeClass('bg').addClass('bg_click').html('你要变的文字');
}else{
$div.removeClass('bg_click').addClass('bg').html('原来的文字');
}
$others.addClass('bg').removeClass('bg_click').html('原来的文字');
});
jquery之超简单的div显示和隐藏特效demo(分享)
复制代码
代码如下:
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title无标题文档/title
script
src="jquery_last.js"
type="text/javascript"/script
script
type="text/javascript"
$(document).ready(
function(){});
function
hiden(){
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
}
function
slideToggle(){
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
}
function
show(){
$("#divObj").show();//显示,参数说明同上
}
function
toggle(){
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
}
function
slide(){
$("#divObj").slideDown();//窗帘效果展开
}
/script
/head
body
h3div里内容的显示隐藏特效/h3
input
type="button"
value="隐藏"
onclick="hiden()"/
input
type="button"
value="显示"
onclick="show()"/
input
type="button"
value="窗帘效果显示2"
onclick="slide()"/
input
type="button"
value="窗帘效果的切换"
onclick="slideToggle()"/
input
type="button"
value="隐藏显示效果切换"
onclick="toggle()"/
div
id="divObj"
style="display:none"
1.测试例子br/
2.测试例子br/
3.测试例子br/
4.测试例子br/
5.测试例子br/
6.测试例子br/
7.测试例子br/
8.测试例子br/
9.测试例子br/
0.测试例子br/
/div
/body
/html
jquery显示和隐藏div特效实例
$(document).ready(
function(){});
function
hiden(){
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
}
function
slideToggle(){
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
}
function
show(){
$("#divObj").show();//显示,参数说明同上
}
function
toggle(){
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
}
function
slide(){
$("#divObj").slideDown();//窗帘效果展开
}
如何用Jquery实现DIV由下向上展开的效果？
如果你的div是通过position:absolute绝对定位的，且通过相对与底部定位，如bottom:0px 这个时候调用slideDown就是向上展开的（因为slideDown说白了就是动态改变元素高度，底部定位固定，高度变高的时候就向上扩展了）。
或者可以使用jQuery的$().animate()动画方法，自己定义动画的内容，因为不知道你的div是通过什么方法定位到底部的，这里只能写个简单的例子
$("#bar").stop(true,true).animate({hight:100px});
如果还有问题可以追问或者加我hi详细询问
如何用jQuery实现div边框渐显效果
1 先给div设置一个边框div{border:2px solid #999;}
2 然后设置动画：
$("div").animate({
borderWidth:0,
padding:'2px'},1000)
