jquery的hide和show方法疑问

Posted 2023-05-09

在网页中使用jquery的hide和show隐藏和显示元素时，当浏览器滚动条未处于最上面时，如图
，执行hide或show方法，滚动条会自动回滚到最上面，从而造成页面突然向上跳动，造成不好的用户体验，请问如何解决？还是我的代码问题？当我把该页面放到其他页面的iframe中时，就没有这样的问题了，为什么？如何解决？
页面高度没法固定，因为数据通过repeater控件从数据库读出，每一条记录都有hide和show方法。

参考技术A hide方法的结果是display:none;也就是隐藏不占位
想隐藏还占位的话用.css("visibility","hidden"); 参考技术B 方法一,外面加一层DIV 定高度
方法二,使用
visibility: hidden;
visibility: visible; 参考技术C 在隐藏之前先设置overflow:hidden, 然后在隐藏 参考技术D 你好:
将高度固定下,合理布局,一般是不会出现这种情况的;

希望可以帮助到你. 第5个回答  2013-07-31 是怎么触发显示、隐藏动作的，如果是超链接，需要在click时返回false，或href="#"等

jquery学习笔记2——jq效果

一、显示隐藏：

可以使用show（）和hide（）方法来显示隐藏；

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

　　可以使用toggle（）方法在show（）方法和hide（）方法中间切换；

$("#tog").click(function(){
   $("p").toggle();
});

　　语法：

$(selector).show(speed,callback);
$(selector).hide(speed,callback);
$(selector).toggle(speed,callback);
//其中speed 和callback都是可选参数，speed单位为毫秒（如设置成1000,2000等）；callback为回调函数；

　　

二、淡入淡出：

方法：fadeIn();　　　　 fadeOut();　　　　fadeToggle();　　　　fadeTo()

$("#btn").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeOut(2000);
    $("#div3").fadeIn("slow")  ;
})

　　语法：

　　　　$(selector).fadeIn(speed,callback);

　　　　$(selector).fadeOut(speed,callback);

　　　　$(selector).fadetoggle(speed,callback);

#("#btn").click(function(){
   $("#div4").fadeTo(slow,0.12);
});

　　fadeTo可以使对象渐变成给定的透明度值（结余0到1之间）；

      语法：fadeTo(speed,opacity,callback);

 

三、滑动：

方法：slideDown()　　　　　　slideUp()　　　　slideToggle()

$("button").click(function(){
    $("#p1").slideUP("slow");      //向上滑动隐藏
    $("#p2").slideDown("slow");      //向下滑动隐藏
    $("#p3").toggle("slow");      //切换   
});

　　语法：

　　$(selector).slideUp(speed,callback);

　　$(selector).slideDown(speed,callback);

　　$(selector).slideToggle(speed,callback);

 

四、animate动画：

语法：

$(selector).animate({params},speed,callback);

　　必须：params参数定义形成动画后的css属性；

　　可选：speed参数为效果时长；

　　可选：callback为回调函数；

　　　1、多参数设置

$("#dtn").click(function(){
    $("div").animate({
　　left:‘20px’，
　　opcity:‘0.2‘,
　　height:‘150px‘,
　　width:‘150px‘
　　})；
});

　　2、animate也可以使用相对值：

$("button").click(function(){
    $("#div5").animate({
    left:‘150px‘,
    height:‘+=20px‘,
    width:‘+=30px‘,
    });
});

　　3、可以将animate设置为”show“，”hide“，”toggle“。

$("button").click(function(){
  $("div").animate({
    height:‘toggle‘
  });
});

　　效果：在设定值与默认值之间切换；

　　4、使用队列功能：　

$("button").click(function(){
      var div=$("div");
      div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");
      div.animate({width:‘300px‘,opacity:‘0.8‘},"slow");
      div.animate({height:‘100px‘,opacity:‘0.4‘},"slow");
      div.animate({width:‘100px‘,opacity:‘0.8‘},"slow");   
});

　　可以设置多个内部”队列“，执行时候会依次进行animate调用

　　5、动画举例：

$("button").click(function(){
  var div=$("div");
  div.animate({left:‘100px‘},"slow");
  div.animate({fontSize:‘3em‘},"slow");
});

　　效果：将div移动到右边，增加文本字号；

 

五、stop（）方法；

　　stop（）方法用于停止、中断jQuery效果；

语法：

$(selector).stop(stopAll,goToEnd);

　　可选：stopAll，是否应该清除动画队列。默认false，仅会停止当前动画，后续动画依次执行；

　　可选：goToEnd，是否立即完成当前动画，默认false。

　　因此,默认的stop（）会清除元素上正在执行的动画；

六、callback  回调函数

callback：在当前动作完成之后执行。作为可选参数；

如果你希望在一个涉及动画的函数之后执行一条语句，请使用callback；

$("p").hide(1000,function(){
　　alert("The paragraph is now hidden");
});

七、Chaining 动作链

　允许我们在一条语句之中用多个jQuery方法,在一个对象上连续使用多个方法，依次执行；

$("#p1").css("color","red").slideUp(2000).slideDown(2000);