jquery-點選事件-點選h1後，h1和div一起移動

2019-12-11 08:39:34

在新建立的文件中，建立h1和div標籤，如圖所示，h1作為div的子集

<div>

</div>

在head下建立style標籤，分別對div和h1新增一些修飾，如圖

<style>

div{width:200px;height:200px;background-color:blue;position:relative;}

h1{line-height:200px;text-align:center;color:white;}

</style>

然後ctrl+s儲存檔案，在瀏覽器中預覽效果，如圖

將jquery檔案調入到檔案中

將jquery引入到檔案中後，開始寫命令，當點選h1時，h1和div一起移動，如圖

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

$("div").animate({left:200})

.animate({top:200})

.animate({left:0})

.animate({top:0})

})

</script>

ctrl+s儲存檔案，然後開啟瀏覽器預覽檢視最後效果，如圖，