jQuery-----实现显示隐藏效果

一,显示隐藏

hide() 隐藏

//用如下代码隐藏target元素
	$(".target").hide();
	
//与用css()的方法设置display属性效果相同
	$(".target").css("display","none");

show() 显示

//用如下代码隐藏target元素
	$(".target").show();
	
//与用css()的方法设置display属性效果相同
	$(".target").css("display","block");

toggle() 绑定两个或多个处理程序绑定到匹配的元素，用来执行在交替的点击。

//可实现隐藏显示
$('#target').toggle(function() {
 	 alert('First handler for .toggle() called.');
	}, function() {
 	 alert('Second handler for .toggle() called.');
	});

二,淡入淡出

fadeIn() 淡入

<div id="clickme">
      Click here
    </div>
<img id="book" src="book.png" alt="" width="100" height="123" />
    $('#clickme').click(function() {
      $('#book').fadeIn('slow', function() {
      //执行完后
      // Animation complete
      });
    });

fadeOut() 淡出

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
  //执行完后
    // Animation complete.
  });
});

.fadeTo() 透明度变化

<div id="clickme">
    Click here
  </div>
  <img id="book" src="book.png" alt="" width="100" height="123" />
  
  $('#clickme').click(function() {
    $('#book').fadeTo('slow', 0.5, function() {
    });
  });

我们设置opacity的值,就可以实现显示隐藏的效果