mouseout在鼠标移入子元素时也会触发，而mouseleave只会在鼠标移出本元素时触发
以下是完整代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript" src="jquery.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//-----------------------------
var slowObj
var objWidth
var objHeight
var iter
var operator
var flag = true
function SlowDiv2(tableId,operator2){
slowObj = $("#"+tableId)
if(flag){
objWidth = slowObj.width()
objHeight = slowObj.height()
flag = false
}
slowObj.css({"overflow":"hidden"})
operator = operator2
if(operator=="show"){
slowObj.width(0)
slowObj.height(0)
}
iter = setInterval(operateTable,14)
}
function operateTable(){
var tmpWidth = slowObj.width()
var tmpHeight = slowObj.height()
if(operator=="hide"){
//隐藏table
if( (tmpWidth<=18 || tmpWidth-10<=0 ) &(tmpHeight<=18 || tmpHeight<=0)){
var d = clearInterval(iter)
slowObj.hide()
return
}else{
slowObj.width(tmpWidth-10)
slowObj.height(tmpHeight-10)
$("#ttest").val("-"+slowObj.width())
}
//$("#ttest").val(objWidth)
}else{
//显示table
slowObj.show()
if(tmpWidth+10>objWidth || tmpHeight+10>objHeight){
var d = clearInterval(iter)
slowObj.width(objWidth)
slowObj.height(objHeight)
return
}else{
slowObj.width(tmpWidth+20)
slowObj.height(tmpHeight+2)
$("#ttest").val("+"+slowObj.width())
}
// $("#ttest").val(objWidth)
}
}
$(document).ready(function(){
$("#S_switch").mouseover(function(){
SlowDiv2("testTable","show")
$("#S_switch").focus(function(){
$("#ttest").val("#S_switch")
})
}).mouseout(function(){
//alert("#S_switch out")
//SlowDiv2("testTable","show")
})
$("#testTable").mouseleave(function(){
// $("#ttest").val("table out")
SlowDiv2("testTable","hide")
}).mouseover(function(){
})
$("#testTable tr").mouseleave(function(){
//alert("tr out")
}).mouseover(function(){
//alert("tr over")
})
$("#testTable tr").css("background-color","pink")
})
</SCRIPT>
</HEAD>
<BODY>
<p id="S_switch" style="width:20pxbackground-color:grayfloat:lefttext-align:center">
<b>>></b>
</p>
<!-- div --->
<div style="width:302height:200pxbackground-color:pinkdisplay:none" id="testTable" >
<div style="background-color:#123abcwidth:100%">123213</div>
saf师大<br/>
1<br/>
1<br/>
</div>
</BODY>
</HTML>
我不知道是要它们同时进行还是先移动过去再隐藏，2个；
第一个是先移动后隐藏
$(function(){
$("div").animate({ left:"100",opacity:1},1000,function(){
$(this).css({display:"none"})
})
})
第2个是移动过去的同时隐藏
$(function(){
$("div").animate({ left:"100",opacity:1},1000)
})
js和jq的主要区别
js是基础，jq是建立在js的基础上，用js开发出来的一个框架，里面实现和很多常用的功能和效果。只要了解其中方法的含义，我们使用的时候直接调用就可以了。
一、文字溢出，就让文字自动换行，代码如下：
二、隐藏内层DIV的宽度
扩展资料：
overflow这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
参考资料：w3school--CSS overflow 属性
