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

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>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！