script.aculo.us庫是一個跨瀏覽器庫，旨在改善網站的用戶界麵。在本文中，我們將演示並行效應。該效果用於組合多個效果以用於給定元素。我們也可以調整效果的持續時間。
用法:
Effect.Parallel( [array of subeffects], [options] )
參數：該效果在下麵描述的options對象中具有單個參數：
- sync:這是一個布爾值，可以防止效果在初始化後立即開始同步。
為了演示此函數的使用，我們編寫了一小段代碼。其中，我們編寫了一個名為ShowEffect方法的小型JavaScript函數，該函數使用此庫的Parallel方法。下麵的示例演示了該方法。
範例1：
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<script type="text/javascript">
function ShowEffect(element) {
// Using the Parallel effect
// with 2 effects and default
// options
new Effect.Parallel([
new Effect.Move(element, {
x:20,
y:50,
mode:'relative'
}),
new Effect.Opacity(element, {
from:1,
to:0
})
]);
}
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Parallel Effect</h2>
<button onclick="ShowEffect('hideshow')">
Click me use parallel
effects on the line
</button>
<br><br>
<div id="hideshow" style=
"background-color:lightgreen;">
LINE TO SHOW PARALLEL EFFECT
</div>
</body>
</html>輸出：
範例2：
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<script type="text/javascript">
function ShowEffect(element) {
// Using the Parallel effect
// with 2 effects and the
// sync parameter
new Effect.Parallel([
new Effect.Move(element, {
x:100,
y:50,
mode:'relative'
}),
new Effect.SwitchOff(element)
], {
sync:false
});
}
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Parallel Effect</h2>
<button onclick="ShowEffect('geeks_1')">
Click me use parallel
effects on the line
</button>
<br><br>
<div id="geeks_1" style=
"position:absolute">
GeeksforGeeks
</div>
</body>
</html>輸出：
相關用法
注：本文由純淨天空篩選整理自Jitender_1998大神的英文原創作品 script.aculo.us Parallel Effect。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。