1、点击显示隐藏、横向淡入淡出

jQuery

jQuery(function($) {
 $("#slidewidth button").click(function(){  
   $(this).next().animate({width: 'toggle'},500);  
 });
});

HTML

<div id="slidewidth" class="slide">
  <button> slide it </button>
  <div class="inner"><img src="tao/images/hdp.png"></div>
</div>

 2、点击上下显示隐藏：

<p class="flip">点击这里，隐藏/显示面板</p>
<div class="panel"><p>一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。</p>
<p>在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。</p></div>

 jQuery

$(".flip").click(function(){
//  $(".panel").toggle();//这个不带动画特效
  $(".panel").slideToggle();
 });

3、触发后显示隐藏

jQuery(function($) {
  
 var moreLink = $('.more-link');
    $('.main').hover(function() {
        $(this).find(moreLink).animate({'width': '300px'},100);
    },
    function() {
        $(this).find(moreLink).animate({
            'width': '40px'
        },
        100)
    });
 //+++++++++++++++++
 $('.main .more-link').hover(function() {
        $(this).children('.sou').show();
    },
    function() {
        $(this).children('.sou').hide();
    });
});

<div class="main">
 <div class="more-link">
  <img src="menu.png">
  <div class="sou">搜索文字搜索文字搜索文字</div>
 </div>
</div>