微信号:
当前位置:首页 > 资讯文摘 > 网络知识

jquery对于div的显示和隐藏操作

2014/12/6 14:29:45

一、简介

$("#id").show()表示display:block,
$("#id").hide()表示display:none;
$("#id").fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的。
$("#id").fadeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。
$("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

$("#id").css('display','none');
$("#id").css('display','block');

$("#id")[0].style.display = 'none';

二、用法

1、淡入淡出

$(document).ready(function() {  
    $('.more-item').click(function(){
        $("#shade_div").toggle();
        $('#shade_div').click(function(){
            $(".more_item").fadeOut();
            $("#shade_div").fadeOut();
        })
        $("#shade_div").height($('body').height()+45);  
    });
2、显示和隐藏

$(".btn1").click(function(){
  $("p").show();
  $("p").hide();
});

3、切换颜色

$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);


});

 


 

相关新闻: