jquery ui_使用jQuery UI的Shake效果进行震动

jquery ui

Yesterday I created a tutorial showing you how you can shake an element using Fx.Shake, a MooTools component written by Aaron Newton. It turns out that jQuery UI also has a shake effect which can draw attention to an element.

昨天我创建了一个教程，向您展示如何使用 Aaron Newton编写的MooTools组件Fx.Shake摇动元素 。 事实证明，jQuery UI也具有抖动效果，可以引起人们对元素的注意。

View Demo 观看演示

XHTML (The XHTML)

<div id="shaker">
<a href="https://davidwalsh.name"><img src="/demo/mootools-shake.png" alt="David Walsh Blog" /></a>
</div>

Exactly the same as my MooTools method.

与我的MooTools方法完全相同。

CSS (The CSS)

#shaker		{ position:fixed; top:10px; right:10px; width:299px; height:253px; display:none; }

Also exactly the same as my MooTools method.

也和我的MooTools方法完全一样。

jQuery JavaScript (The jQuery JavaScript)

function periodical() {
	$('#shaker').effect('shake', { times:3 }, 200);
}
$(document).ready(function() {
	$('#shaker').hide().css('display','').fadeIn(600);
	var shake = setInterval(periodical, 5000);
	
	/* updated: click clear */
	$('#shaker').click(function() {
		clearInterval(shake);
	})	
});

The code is basically the exact same logic ported into jQuery's syntax and methodology. Remember that you need jQuery UI to do this.

该代码基本上与jQuery的语法和方法中移植的逻辑完全相同。 请记住，您需要jQuery UI来执行此操作。

View Demo 观看演示

What I loved about creating these tutorial was that these are perfect examples of how flexible these two libraries are. They both allowed me to create the same functionality in very little code. People shouldn't focus on "jQuery against MooTools," people should focus on "jQuery or MooTools."

我喜欢创建这些教程的原因是，这是这两个库的灵活性的完美示例。 他们俩都允许我用很少的代码创建相同的功能。 人们不应该关注“针对MooTools的jQuery”，而应该关注“ jQuery或MooTools”。

更新：单击清除 (Update: Click Clear)

I added clearing the interval (and thus stop the shaking) once the user has clicked on the element.

用户单击元素后，我添加了清除间隔(从而停止晃动)的功能。

翻译自: https://davidwalsh.name/jquery-shake

jquery ui