<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽,hover,動畫</title>
<script type="text/javascript" src="../jquery-3.2.1.min.js"></script>
<!-- <style type="text/css">
div{width: 100px;height: 100px;background: red;position: absolute;}
</style>
<script type="text/javascript">
//jquery寫拖拽
$(function(){
var disx=0;
var disy=0;
$('div').mousedown(function(ev){
disx=ev.pageX-$(this).offset.left;
disy=ev.pageY-$(this).offset.top;
})
$(document).mousemove(function(ev){
$('div').css('left',ev.pageX-disx);
$('div').css('top',ev.pageY-disy);
})
$(document).mouseup(function(){
$(document).off();
})
return false;
})
</script> -->
<!--
hover():當鼠標觸碰是發生的事件，第一個參數是當觸碰時發生的 ，第二個參數是鼠標移開是發生的事件
運動效果：
hide():隱藏,裏面有數字可以表示時間
show():顯示
fadeOut():淡出，裏面有數字可以表示時間
fadeIn():淡入
fadeTo():也是淡入淡出，第一個參數是時間，第二個是透明度 0~1
slideUp():向上收起摺疊，裏面有數字可以表示時間 1~1000，默認400
slideDown()：向下放出
-->
<style type="text/css">
#div1{width: 100px;height: 100px;background: red}
#div2{width: 100px;height: 100px;background: yellow}
</style>
<script type="text/javascript">
$(function(){
$('#div1').hover(function(){
//$(this).css('background',"blue");
//$('#div2').hide(1000);
//$('#div2').fadeOut(3000);
//$('#div2').slideUp();
$('#div2').fadeTo(1000,0.5);
},function(){
//$(this).css('background',"red");
//$('#div2').show(1000);
//$('#div2').fadeIn(3000);
//$('#div2').fadeTo(3000);
//$('#div2').slideDown();
$('#div2').fadeTo(1000,1);
});
});
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
