<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery--常用函数2</title>
<style>
.div1{ 600px; height: 300px; background: red;}
.div2{ 300px; height: 200px; background: yellow;}
</style>
<script src='../jquery-3.1.1.min.js'></script>
<script>
$(function(){
$('.div1').hover(function(){
// $(this).css('background','blue');
// $('.div2').show(300);
// $('.div2').fadeOut();
$('.div2').slideUp();
},
function(){
// $(this).css('background','yellow');
// $('.div2').hide(300);
// $('.div2').fadeIn();
$('.div2').slideDown();
});
});
</script>
</head>
<body>
<div class="div1">
hover();鼠标移入移出 参数1移入 参数2 移出<br/>
hover(function(){},function(){})<br/>
show();显示 hide();隐藏<br/>
$('.div2').show() 参数就是运动时间 <br/>
fadeOut() 淡入 fadeIn 淡出
$('.div2').fadeIn();参数就是变化时间 <br/>
slideUp();向上变化 slideDown(); 向下变化<br/>
$('.div2').slideDown(); 参数就是变化时间<br/>
</div>
<div class="div2">
</div>
</body>
</html>