讓照片跑開，不要妨礙閱讀：easy jQuery

我在想著，數位文本是否也有著布萊希特所愛用的「間離法」的效果。這一用在 戲劇的技法，我總覺得會跟數 位文本中的「互動法」有著理論上接軌的 可能。

貝托爾特·布萊希特                
Bertolt Brecht                  
來源：《維基百科》  Click ↑

布萊希特
間離效果（即陌生化）其 要義概括起來有如下幾點：
　　（1） 布萊希特認為，… …。
　　（2） 陌生化效果就是借助種種戲劇藝術。……總之，使它們失去為人們所熟知的假像，揭示它們的社會本質。
　　（3） 在藝術欣賞中，……，破除催眠般的舞臺幻覺，觸發觀眾藝術鑒賞中的理性 激動，引起深廣的聯想和冷靜的思考。
　　（4） 陌生化效果的目的是引導人們對舞臺表現的人物、事件及其社會過程，採取一種批判、探討的態度，促使他們從社會的角度出發，作出有益的批判，感奮人們改造世 界的行動。”（《試論布萊希特的陌生化效果》 孫君華）

CSS：

<style type="text/css">
.word011120 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
padding-right: 9em;
letter-spacing: 0.1em;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAspAm_tZGTYLXgFpZZohLDRYA7p-C8yKyZAE7ToTDe_0xh-sM9scg43Ywv1cXn9Faw4PqrdcAPNeAYQ6qA-oCoCxY-B9vdWXpReJtaNiUDEKYxet8kkdMWHvaC-9hyQjbtlt6ewII-Yw/w155-h168-no/15884987-mouse-push.jpg);
background-repeat: no-repeat;
background-position: right 45px bottom 15px;
background-size: 36px;
cursor: pointer;
}
</style>

jQuery:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$('#a112001').click(function() {
$(this).animate({'top': '+=220px'}, {duration: 1200}).fadeOut(200);
});
$('#a112002').click(function() {
$('#a112001:hidden').animate({'top': '-=220px'}, {duration: 100}).show(400);
});

});
</script>

教 學影音：