課程的事例是否有誤?
我隨便找了兩張圖片來(lái)實(shí)驗(yàn)示例中的代碼，但是運(yùn)行結(jié)果是兩張圖片都向上滑動(dòng)隱藏起來(lái)了，因?yàn)楸緛?lái)HTML的結(jié)構(gòu)就是兩張圖片都處于顯示狀態(tài)的，反正我無(wú)法做到課程所說(shuō)的變臉效果。
kelvinwong
2016-03-11
2 回答
舉報(bào)
0/150
提交
取消
2016-03-12
<!DOCTYPE?html> <html> <head> ????<title>使用slideToggle()方法切換滑動(dòng)效果</title> ????<script?src="http://libs.baidu.com/jquery/1.9.0/jquery.js"?type="text/javascript"></script> </head> <style> div?{ ????/*?兩張圖片重疊?才能看到變臉效果?*/ ????position:?absolute; } #img2?{ ????/*?頁(yè)面只能同時(shí)顯示一張圖片,用于點(diǎn)擊,觸發(fā)事件?*/ ????display:?none; } </style> <body> ????<!--?圖片需要一個(gè)容器,不然就是縮放效果,而不是滑動(dòng)效果?--> ????<div?id="img1"> ????????<img?src="http://static.mukewang.com/static/img/common/logo.png"?/> ????</div> ????<div?id="img2"> ????????<img?src="http://img1.sycdn.imooc.com//user/5458508600019e2602200220-40-40.jpg"?/> ????</div> ????<script?type="text/javascript"> ????$(function()?{ ????????$("#img1").bind("click",?function()?{ ????????????//?一張圖片隱藏后,另一張?jiān)亠@示 ????????????$("#img1").slideToggle(1000,?function()?{ ????????????????$("#img2").slideToggle(1000); ????????????}) ????????}); ????????$("#img2").bind("click",?function()?{ ????????????$("#img2").slideToggle(1000,?function()?{ ????????????????$("#img1").slideToggle(1000); ????????????}) ????????}) ????}); ????</script> </body> </html>2016-05-12
在示例里直接先把圖2滑上來(lái)就好了，這個(gè)時(shí)候2沒(méi)有大小圖1在原位，點(diǎn)擊之后圖1滑上沒(méi)有大小圖2在圖1位置
$(function()?{ ????????????$("#div2").slideUp("fast");