请教jquery的hide()和show()方法遇到的问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了请教jquery的hide()和show()方法遇到的问题相关的知识,希望对你有一定的参考价值。

jquery的hide(speed,callback)和show(speed,callback)方法,callback代表hide和show完成之后要执行的函数。但是在测试中发现是先执行的是callback的函数,之后才执行hide和show的方法,而且在hide的时候,加上参数后界面上明显有个跳动的动作,就是隐藏后又显示下隐藏前的组件然后再隐藏,不加参数则不会看到该现象,不知是为什么,请高手指导下。
见下面例子:
<html>
<head>
<script type="text/javascript" src="../lib/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function()
$("#hide").click(function()
$("#class1").hide(1000,myCallBack());
);
$("#show").click(function()
$("#class1").show("slow",myCallBack());
);
);

function myCallBack()
alert("callBack");

</script>

</head>
<body>
<div id="class1"><h1>content</h1></div>
<input id = "hide" type = "button" value="hide" />
 
<input id = "show" type = "button" value="show" />
</body>
</html>

myCallBack去掉括号就行了
这个效果用fadeIn和fadeOut也可以,渐隐渐现。追问

非常感谢,去掉括号可以了,还有一个疑问:hide的时候,加上参数隐藏的时候会有一个跳动的动作,就是隐藏后又显示下隐藏前的组件然后再隐藏,不加参数则不会看到该现象,这个是为什么呀?

追答

Jquery动画在IE下出现抖动,是因为浏览器解析该页面并没有采用标准模式,而Jquery动画必须是在标准模式之下,也就是strict mode。

如果不在HTML前制定DOCTYPE,那么IE会使用怪癖模式,也就是Quirks Mode解析该页面。从科学地角度讲,我们还是应该制定为strict mode的。但是难保你当初为了省事而忘记写了,结果项目越做越大了。

而你又恰恰使用了Jquery,你可以选在再把制定为strict mode的这行代码

加上去,Jquery动画应该就正常了

参考技术A $("#class1").hide(1000,myCallBack());
$("#class1").show("slow",myCallBack());
上面两句,把myCallBack后面的括号去掉,分别改成
$("#class1").hide(1000,myCallBack);
$("#class1").show("slow",myCallBack);追问

非常感谢,去掉括号可以了,还有一个疑问:hide的时候,加上参数隐藏的时候会有一个跳动的动作,就是隐藏后又显示下隐藏前的组件然后再隐藏,不加参数则不会看到该现象,这个是为什么呀?

参考技术B 你说的第二个问题主要是ie下的吧?ff下的效果会好一些,最后那个跳跃看起来会很小
这个似乎是没有办法的
参考技术C 确实有跳动的情况

JQuery学习之各种效果演示

1.隐藏与显示:hide()和show(),toggle()

**隐藏

$("#hide").click(function(){

  $("p").hide();

});

**显示:

$("#show").click(function(){

  #("p").show();

});

**切换:toggle()方法来切换hide()和show()方法

$("button").click(function(){

  $("p").toggle();

});

**语法:

$(selector).hide(speed,callback);  
//speed参数用于规定隐藏/显示的速度,可以取:slow,fast或毫秒

$(selector).show(speed,callback);
//callback参数是显示或隐藏完成后执行的函数名称
 
 
2.淡入淡出
**fadenln():可以实现元素的淡入效果:
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn("3000");
});
语法:$(selector).fadeIn(speed,callback);    //speed参数规定效果的时长,callback参数是fading完成后执行的函数名称
 
**fadeOut():用于淡出可见元素,语法同上
$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});
 
**fadeToggle():可以实现fadeIn()和fadeOut()之间的切换,语法参数同上;
如果元素已淡出,则fadeToggle()会向元素添加淡入效果;
如果元素已淡入,则fadeToggle()会向元素添加淡出效果;
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});
 
**fadeTo():允许渐变为给定的不透明度(值介于0与1之间)
$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});
语法:$(selector).fadeTo(speed,opacity,callback);      //opacity参数将淡入淡出效果设置为给定的不透明度
 
 
3.滑动:
**slideDown():用于向下滑动元素
$("#flip").click(function(){
  $("#panel").slideDown();
});
语法:$(selector).slideDown(speed,callback);     //参数使用同上
 
**slideUp():用于向上滑动元素,语法同上
$("#flip").click(function(){
  $("#panel").slideUp();
});
 
**sideToggle():可以在slideDown()和slideUp()方法之间进行切换,语法同上:
$("#flip").click(function(){
  $("#panel").slideToggle();
});
 
 
4.动画:
**animate():用于创建自定义动画
$("button").click(function(){
  $("#div").animate({left:‘250px‘});
});
语法:$(selector).animate({params},speed,callback);
//params参数定义形成动画的CSS属性
//speed参数规定效果的时长
//callback参数是动画完成之后所执行的函数名称
 
**animate()操作多个属性:
$("button").click(function(){
  $("div").animate({
    left:‘250px‘,
    opacity:‘0.5‘,
    height: ‘150px‘,
    width:‘150px‘
    });
});
 
**animate():使用相对值(该值相对于元素的当前值)
$("button").click(function(){
  $("div").animate({
    left:‘250px‘,
        height:‘+=150px‘,
    width:‘+=150px‘
  });
});
 
**animate()使用预定义的值,可以把属性的动画设置为“show”“hide”或“toggle”:
$("button").click(function(){
  $("div").animate({
    height:‘toggle‘
  });
});
 
**animate()使用队列功能,多个animate同时实现,排队进行:
$("button").click(function(){
  var div=$("div");
  div.animate({left:‘100px‘},"slow");
  div.animate({fontSize:‘3em‘},"slow")
});
 
 
5.停止动画:stop()方法适用于所有jQuery效果函数,包括滑动,淡入淡出和自定义动画
$("#stop").click(function(){
  $("#panel").stop();
});
 
语法:$(selector).stop(stopAll,goToEnd);
//stopAll参数规定是否应该清楚动画队列,默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行
//goToEnd参数规定是否立即完成当前动画,,默认是false
//默认的,stop()会清除在被元素指定的当前动画
 
 
6.Callback方法:
**在隐藏效果完全实现后回调函数:
$("button").click(function(){
  $("p").hide("slow",function(){
   alert("The paragrah is now hidden"); 
  });
});
 
**没有回调函数时,警告框会在隐藏效果完成前弹出:
$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});
 
 
7.Chaining方法:允许我们在一条语句中运行多个jQuery方法(在相同的元素上)
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
//先css变颜色,在向上滑动,然后向下滑动
 
 

以上是关于请教jquery的hide()和show()方法遇到的问题的主要内容,如果未能解决你的问题,请参考以下文章

jquery hide,show方法问题

jquery的show/hide/toggle

JQuery基础知识

如何在 Jquery 中将 delay() 与 show() 和 hide() 一起使用

jquery学习笔记2——jq效果

JQuery .show() 方法在 .hide 之后不起作用