Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.03.2015, 23:13
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Исполнять скрипт только для текущего элемента
Здравствуйте, друзья!

Делаю раскрывающийся блок, основное уже сделал, но никак не могу заставить выполняться скрипт только для текущего блока, а не для всех блоков на странице...

А так же не понимаю как сделать проверку на полосу прокрутки. Ведь если её нет - зачем раздвигать блок.

Прошу помощи.

Ссылка на проект: http://jsfiddle.net/n995Lmdj/

Скрипт:

$(document).ready(function() {

    var t;

    $('.container').hover(function() {

        clearTimeout(t);

        $('.container').animate({width: "200px"},{queue:false,duration:200}).css('overflow-x', 'auto');

		}, function() {

        t = setTimeout(function() {$('.container').animate({width: "150px"},{queue:false,duration:200}).css('overflow-x', 'auto');},

        500);

	});

});


Буду невероятно признателен за помощь!
Ответить с цитированием
  #2 (permalink)  
Старый 09.03.2015, 00:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от snovapavel
только для текущего блока
$(this).animate
Ответить с цитированием
  #3 (permalink)  
Старый 09.03.2015, 00:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от snovapavel
как сделать проверку на полосу прокрутки
http://learn.javascript.ru/metrics#scrollwidth-height
Ответить с цитированием
  #4 (permalink)  
Старый 09.03.2015, 00:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

snovapavel,
http://jsfiddle.net/n995Lmdj/2/
Ответить с цитированием
  #5 (permalink)  
Старый 09.03.2015, 00:47
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

Не совсем понимаю, что вы хотите сделать. Попробуйте что-то в этом роде.
$(function() {
	$('.container').each(function() {
		$(this).css({'overflow-x': 'auto'});
		
		if ( this.scrollWidth > 150 ) {
			$(this).on('mouseover', function(e) {
					$(this).animate({'width': 200}, 200);
				})
				.on('mouseout', function(e) {
					$(this).delay(500).animate({'width': 150}, 200);
				});
		}
	});
});

Последний раз редактировалось dd_smol, 09.03.2015 в 00:57.
Ответить с цитированием
  #6 (permalink)  
Старый 09.03.2015, 08:58
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Благодарю вас
Сообщение от рони Посмотреть сообщение
snovapavel,
http://jsfiddle.net/n995Lmdj/2/
Я внёс необходимые изменения, но теперь блок вообще не возвращается назад почему-то...

Вот ссылка: http://jsfiddle.net/n995Lmdj/4/

Что я пытаюсь реализовать:

1. Чтобы блок раздвигался на всю ширину находящегося в нём контента, но не более 600px (вопрос к мастерам, как приписать сюда это условие
width: this.scrollWidth
?).

2. Чтобы если я быстро наведу и уберу мышку с блока, он бы не прыгал туда-сюда 10 раз пока не отпрыгает все наведения (именно для этого я и прописал это свойство
queue:false
).

3. Проверка на время, нужна для того, чтобы пока мышка находится над блоком он не закрывался, а закрывался только через полсекунды после того - как я уберу её. И опять же, блок не дёргается туда-сюда если я уберу и верну мышь обратно на блок (как в меню например).

4.
.css('overflow-x', 'auto')
необходимо для того, чтобы не дёргались полосы прокрутки, то пропадая, то появляясь вновь. Поэтому и пришлось их прописывать вообще везде.

Буду признателен, вам за помощь!
Ответить с цитированием
  #7 (permalink)  
Старый 09.03.2015, 10:12
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Чтобы блок раздвигался на всю ширину находящегося в нём контента, но не более 600

$(e).animate({'width': $(e).innerWidth()}, 200);


он бы не прыгал туда-сюда 10 раз пока не отпрыгает все

mouseover - mouseenter
mouseout - mouseleave
Ответить с цитированием
  #8 (permalink)  
Старый 09.03.2015, 10:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от snovapavel
Чтобы блок раздвигался на всю ширину находящегося в нём контента, но не более 600px
width: this.scrollWidth > 600 ? 600 : this.scrollWidth
Сообщение от snovapavel
он бы не прыгал туда-сюда
stop() и
Сообщение от laimas
mouseover - mouseenter
mouseout - mouseleave
4 вопрос ??? что именно хотите

Последний раз редактировалось рони, 09.03.2015 в 10:20.
Ответить с цитированием
  #9 (permalink)  
Старый 09.03.2015, 10:31
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Сообщение от рони
4 вопрос ??? что именно хотите
Чтобы не дёргались полосы прокрутки, пока происходит увеличение блока они пропадают из виду, если не прописать .css('overflow-x', 'auto')
на движение туда и обратно.

Вы не могли бы внести изменения здесь, так как моих знаний пока явно недостаточно...

Огромное спасибо!
Ответить с цитированием
  #10 (permalink)  
Старый 09.03.2015, 11:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

$('.container').mouseenter(function() {
 ....
$(this).stop().animate({width: this.scrollWidth > 600 ? 600 : this.scrollWidth}, 200).css('overflow-x', 'auto');
....


PS. Кстати, если это по классу, а значит не один объект, то нужно остановить текущую анимацию у всех объектов.

Последний раз редактировалось laimas, 09.03.2015 в 11:19.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужен скрипт для счета времени с текущего момента Julius123 Javascript под браузер 9 05.11.2014 20:35
Нужен скрипт для Greasemonkey разворачивающий ссылки Ирина_Инина Firefox/Mozilla 7 18.09.2014 22:02
Нужен скрипт для работы через Google Script (Spreadsheets) Satmax Работа 0 13.08.2014 16:55
Each срабатывает только для одного элемента Александр222 Общие вопросы Javascript 1 04.08.2014 14:12
виджет, только сторона клиента (JS, JQUery, работа с датами, масштабирование) eugen35 Работа 4 31.07.2014 09:50