向左、向右移動：easy jQuery

2017年版，純CSS的做法

後現代風格	遮住文字→	形成 想讀張力
	移動圖像→	進行閱讀過程

---

現代性與後現性之間的矛盾只是一個更大的歷史過程中的一個階段，而不是一個固定的有中心的靜止的結構； 尋找矛盾，發現矛盾，或甚「建構」矛盾， 正是布萊希特的「方法」的核心。

詹姆遜，《布萊希特與方法》陳永國譯。

jQuery:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var flag1126 = 'a';

$('#d112601').click(function() {

if(flag1126 == 'a') {
$(this).animate({'left': '-=600px'}, {duration: 1400});
flag1126 = 'b';
}

else {
$(this).animate({'left': '+=600px'}, {duration: 1400});
flag1126 = 'a';
}
});
});
</script>

基 礎概念講解	實戰操作過程

使用CSS的 方法

如果想要：click一下咖啡杯，物件可以移動。這 樣的互動模態之文本形式，可以使用jQuery程 式外，另一種更方使的作法是和CSS配合使用。
我們可以看到簡單的運用jQuery的toggleClass()，再配合使用css trnsition以及transform之語法，就可以創造補間形式的動態效果。
這一作用更直覺，更適合一般人的直覺寫作思考。

CSS:

<style>
.clicsstt170101 {
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
cursor: pointer;
}

.clicsstt170101add01 {
transform: translate(-350px, -140px);
}
</style>


jQuery: click

$(this).toggleClass('clicsstt170101add01');


影音教學：

按一下
下面的圖像就會自動的移開。
以利閱讀的進行！