位置：广州松河 > 技术支持 > jQuery：点击显示隐藏、横向淡入淡出_js/jQuery

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

来源：网络整理时间：2023/3/4 0:56:05 共 3644 浏览

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>

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery控制的不同方向的滑动(向左、向右滑动等)_js/jQuery | ·下一条：纯CSS:多彩颜色、不同颜色 | jQuery+CSS随机显示颜色_CSS学习