Цикличное повторение скрипта

SCHNITZER · November 12, 2010

<script type="text/javascript">
			$(document).ready(function () {
				$('#square').delay(2000).fadeTo(800, 0.2);
				$('#square').fadeTo(500, 1.0);
			});
		</script>

Вот такая история. А теперь, я хочу, что бы этот эффект постоянно повторялся. Будет такой "эффект дыхания".

Я понимаю, что тут "учи флеш", а как реализовать на jQuery или на JS?

Сделал gif, много весит.

roma · November 12, 2010

На JS есть функция setinterval() загугли она должна помочь

SCHNITZER · November 13, 2010

Можно еще как-то помочь, не получается.

MC WEST · November 13, 2010

А что именно не получается?

<script type="text/javascript">
$(document).ready(function () {
	setInterval(function() {
		$('#square').delay(2000).fadeTo(800, 0.2);
		$('#square').fadeTo(500, 1.0);
	}, 2000);
});
</script>

Этот код будет повторять твои действия каждый 2 секунды, по идее должно работать.

SCHNITZER · November 14, 2010

Да, спасибо. Вот не мог просто найти так коротко, находил скрипты с текстом на пол страницы, так все ясно, спасибо.

Great Rash · November 15, 2010

Вопрос на засыпку: зачем было искать скрипты на пол страницы если есть тупо мануалы по JavaScript?

Вот вам ссылка на тот которым я пользуюсь давно: http://www.w3schools.com/jsref/default.asp

setInterval

Эх... поколение jquery-поклонников

psywalker · November 15, 2010

Эх... поколение jquery-поклонников

Да, s0rr0w про таких говорит, что у них jquery головного мозга)

s0rr0w · November 15, 2010

Да, s0rr0w про таких говорит, что у них jquery головного мозга)

Говорил, говорю и буду говорить.

psywalker · November 15, 2010

Говорил, говорю и буду говорить.

А я поддерживал, поддерживаю и буду поддерживать

mishka · November 15, 2010

так как у меня "jQuery головного мозга"

То я бы это сделал так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>cycleFade</title>
	<style type="text/css">
		.box {
			width: 100px;
			height: 100px;
			background: #f00;
		}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript">
		jQuery(function(){
			jQuery('.box').cycleFade({
				min: 0.2
			})
		})

		jQuery.fn.cycleFade = function(options){
			var options = jQuery.extend({
				max: 1,
				min: 0,
				speedIn: 1000,
				speedOut: 1000,
				delayIn: 500,
				delayOut: 500,
				easing: 'swing'
			}, options);

			return this.each(function(){
				var $this = jQuery(this),
					_max = options.max,
					_min = options.min,
					_speedIn = options.speedIn,
					_speedOut = options.speedOut,
					_delayIn = options.delayIn,
					_delayOut = options.delayOut,
					_easing = options.easing;

				function cycleFadeFunction(){
					$this.animate({opacity: _min}, {queue: false, easing: _easing, duration: _speedOut, complete: function(){
						setTimeout(function(){
							$this.animate({opacity: _max}, {queue: false, easing: _easing, duration: _speedIn, complete: function(){
								setTimeout(cycleFadeFunction, _delayOut)
							}})
						}, _delayIn)
					}})
				}
				cycleFadeFunction();
			})
		}
	</script>
</head>
<body>
	<div class="box"></div>
</body>
</html>

Edited November 15, 2010 by mishka2

Sign In

Цикличное повторение скрипта

Question

SCHNITZER

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

roma

Link to comment

Share on other sites

SCHNITZER

Link to comment

Share on other sites

MC WEST

Link to comment

Share on other sites

SCHNITZER

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information