jquery

user · November 7, 2008

$("#tire").mouseover(function()
{$("#navigation").animate({"background-position":"0 -50px"},150);});

Что я не так делаю.

e1f · November 7, 2008

Почитай как правильно использовать jQuery.animate():

здесь или

здесь

animate(params, [duration], [easing], [callback])

возвращает: jQuery

Это функция для построения своей, пользовательской анимации. У этой функции один обязательный аргумент, представляющий собой объект состоящий из пар ключ/значение. В качестве ключа выступает CSS-свойство, которое должно быть анимировано (например: "height", "top", or "opacity").

Обратите внимание, что свойства должны быть определены с использованием camel case (т.е. например marginLeft вместо margin-left).

В качестве значения выступает "целевое" значение соответствующего CSS-свойства. Например, если в качестве значения выступает какая-либо цифра, то соответвующее свойство будет трансформировано из своего текущего состояния, в новое состояние.

Обратите внимание, что поддерживаются только свойства, имеющие в качестве значения какие-либо числа (или "hide", "show", "toggle"). Например backgroundColor не поддерживается.

user · November 7, 2008

У меня есть подозрение,что оно вообще не хочет работать.Я ж вроде нормально подключаю.

<script type="text/javascript" src="jquery.js">
$("#index").click(function()
{$("#menu").animate({top:"150px"},1000);});
</script>
<style type="text/css">
#menu{position:absolute;top:80px;left:210px;}
#index,#tire,#disk,#contacts{background:url(images/menu.png);width:135px;height:137px;}
#index{background-position:0 0;}
#tire{background-position:-140px 0;}
#disk{background-position:-278px 0;}
#contacts{background-position:-415px 0;}
</style>
<table align=center cellpadding=0 cellspacing=0 width=1024>
<tr>
<td width=194 height=64 id="navigation"></td>
<td>
<table id="menu">
<tr>
<td id="index"></td>
<td id="tire"></td>
<td id="disk"></td>
<td id="contacts"></td>
</tr>
</table>
</td>
</tr>
</table>

Edited November 7, 2008 by user

Mutant · November 7, 2008

Если я не ошибаюсь, при добавлении src в тег скрипта, все, что лежит между <script src="..."></script> игнорируется. Попробуй так:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#index").click(function()
{$("#menu").animate({top:"150px"},1000);});
</script>

user · November 7, 2008

Все равно нет.

e1f · November 7, 2008

А библиотека подключается или нет?

Попробуйте написать что-то вроде

<script type="text/javascript">
console.log($('body').html());
</script>

e1f · November 7, 2008

Понял. Проблема в том что скрипт выполняется до того, как появится таблица. Всю эту штуку надо впихнуть в $(document).ready.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#index").click(function(e){ $("#menu").animate({top:"150px"},1000);});
});
</script>
<style type="text/css">
#menu{position:absolute;top:80px;left:210px;}
#index,#tire,#disk,#contacts{background:url(images/menu.png);width:135px;height:137px;}
#index{background-position:0 0;}
#tire{background-position:-140px 0;}
#disk{background-position:-278px 0;}
#contacts{background-position:-415px 0;}
</style>
</head>
<body>
<table align="center" cellpadding="0" cellspacing="0" width="1024">
<tr>
  <td width="194" height="64" id="navigation"></td>
  <td>
	<table id="menu">
	  <tr>
		<td id="index" style="border:1px solid green;">INDEX</td>
		<td id="tire"></td>
		<td id="disk"></td>
		<td id="contacts"></td>
	  </tr>
	</table>
  </td>
</tr>
</table>
</body>
</html>

+ обрамляйте атрибуты кавычками

user · November 7, 2008

Круто,спасибо.

Edited November 7, 2008 by user

user · November 7, 2008

function(e)-что это за параметр передается?

e1f · November 7, 2008

Событие. Он не надо, это я забыл убрать

klierik · November 22, 2008

есть такое:

$('div.sa div.adv-form').slideUp();
$(this).removeClass('adv-open');

класс удаляется сразу при исполнении, а мне надо что б в начале сработал slideUp(); а потом только убрался класс.

как это сделать, подскажите пожалуйста

klierik · November 24, 2008

up.

как решение такого вопроса, вроде есть ф-я wait();

только я не могу врубится как ею пользоваться.

после ее иннициализации скрипт просто уходит в паузу на всегда (:

e1f · November 24, 2008

$('div.sa div.adv-form').slideUp('slow', function(){$('div.sa div.adv-form').removeClass('adv-open');});

Возможно, в этом коллбеке можно использовать this вместо селектора, проверьте, так будет быстрее

klierik · November 24, 2008

сделал через $(this)

весьма благодарен! (:

klierik · November 27, 2008

такая проблема.

я подключаю JQ

потом подключаю файл с ф-ей

его содержание:

// Other Functions
$(document).ready(function(){

	/* Glass Effect */
	function glass (){
		/* auto start show glass*/
		$('div#glass')
			.show()
			.animate({
				opacity: 0.7
			}, 512);

		/* hide glass on self-click */
		$('div#glass').click(function(){
			$('div#glass')
				.animate({
					opacity: 0
				}, 512, function(){ $(this).hide(); });
		});
	}

});

потом подключаю файл с обработчиками:

// Basic Menu
$(document).ready(function(){

	$('a#my-cab').click(function(){
		glass();
	});

});

дело в том что glass(); не запускается.

грешу на неправильный синтаксис, толь ко не пойму что именно не так?

подскажите пожалуйста.

e1f · November 27, 2008

типа и то и то в разных $(document).ready?

не знаю, вполне возможно они перекрываются...

функции не стоит толкать туда, пропиши glass в хеде, а в ready-function оставь бинд

klierik · November 27, 2008

$(document).ready?

ам.. кстати да...

функции не стоит толкать туда, пропиши glass в хеде, а в ready-function оставь бинд

а можно подробнее плз.

e1f · November 27, 2008

ну что-то навроде

<script type="text/javascript">
function glass (){
	/* auto start show glass*/
	$('div#glass').show().animate({opacity: 0.7}, 512);

	/* hide glass on self-click */
	$('div#glass').click(function(){
		$('div#glass').animate({opacity: 0}, 512, function(){ $(this).hide(); });
	});
}
$(document).ready(function(){
  $('a#my-cab').click(function(){
	glass();
  });
}
</script>

А можно определить glass прямо внутри click:

<script type="text/javascript">
$(document).ready(function(){
  $('a#my-cab').click(function(){
	/* auto start show glass*/
	$('div#glass').show().animate({opacity: 0.7}, 512);

	/* hide glass on self-click */
	$('div#glass').click(function(){
		$('div#glass').animate({opacity: 0}, 512, function(){ $(this).hide(); });
	});
  }
});
</script>

Edited November 27, 2008 by e1f

klierik · November 27, 2008

всовывать ее прямо в ф-ю не хочется, так как ее прийдется всовывать в каждую.

а вот Ваш совет вынести за область $(document).ready? помог

большое спасибо.

e1f · November 27, 2008

Да, если это не одноразовая функция, то однозначно лучше отдельную написать, а не анонимную.

klierik · November 28, 2008

2e1f,

возможно Вы поможете еще в такой проблеме.

Делаю "стекло" (еффект затемнения сайта)

Сам div позиционирован абсолютню и имеет такие свойства:

div.glass {
		position: absolute;
		left: 0; top: 0; right: 0; bottom: 0;
		width: 100%; height: 100%;
		z-index: 1024;
		display: none;

		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
		-moz-opacity: 0;
		-khtml-opacity: 0;
		opacity: 0;
	}

Но под ИЕ6 стекло не растягивается по высоте.

Думаю его растянуть средствами JS только под ИЕ6

подскажите как это реализуется?

Тут же хочу спросить, как присвоить значение, которое равно "текущее - Хпк"

Что то на подобии: obj.style.width -= '100';

Только это под JS. Надо тоже самое под JQ

спасибо

e1f · November 28, 2008

body {
  margin: 0;
  padding: 0;
  width : 100%;
  height: 100%;
}
div.glass {
  background-color: green;
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 1024;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
  -moz-opacity: 0.2;
  -khtml-opacity: 0.2;
  opacity: 0.2;
}

Попробовал: так в ИЕ6 все растягивается нормально (цвет для вида просто).

glass должен лежать лежать прямо в body.

Тут же хочу спросить, как присвоить значение, которое равно "текущее - Хпк"

взять текущее, поюзать ParseInt, и отнять от него 100

в jquery есть методы width и height, юзайте их:

var a = $("#my_id");
var width = a.width() > 0 ? a.width() : 0;
a.css("width",  width + 'px');

Edited November 28, 2008 by e1f

klierik · November 29, 2008

спасибо. буду калупать )))

klierik · December 2, 2008

подскажите, пожалуйста, как узнать высоту/ширину видимой области документа

(хочу сделать позиционирование модального кона на екране)

e1f · December 2, 2008

Можно просто так :

$(window).height()

Но у меня это почему-то не всегда правильно работало, особенно в Опере. В результате остановился на следующем:

var h = 0;
if ( typeof(window.innerHeight) == 'number' ) {
	h = window.innerHeight;
} else if ( document.documentElement && document.documentElement.clientHeight ) {
	h = document.documentElement.clientHeight;
} else if ( document.body && document.body.clientHeight ) {
	h = document.body.clientHeight;
} else {
	h = $(window).height();
}

Аналогично с шириной.

s0rr0w · December 2, 2008

подскажите, пожалуйста, как узнать высоту/ширину видимой области документа
(хочу сделать позиционирование модального кона на екране)

А что говорит Гугль?

Sign In

jquery

Question

Link to comment

Share on other sites

38 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information