Исполнять скрипт только для текущего элемента
 

Здравствуйте, друзья!

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

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

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

Ссылка на проект: 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);

	});

});

Буду невероятно признателен за помощь!

$(this).animate

snovapavel,
http://jsfiddle.net/n995Lmdj/2/

Не совсем понимаю, что вы хотите сделать. Попробуйте что-то в этом роде.

$(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);
				});
		}
	});
});

Благодарю вас
 

Я внёс необходимые изменения, но теперь блок вообще не возвращается назад почему-то...

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

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

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

width: this.scrollWidth

?).

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

queue:false

).

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

4.

.css('overflow-x', 'auto')

необходимо для того, чтобы не дёргались полосы прокрутки, то пропадая, то появляясь вновь. Поэтому и пришлось их прописывать вообще везде.

Буду признателен, вам за помощь!

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

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

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

mouseover - mouseenter
mouseout - mouseleave

width: this.scrollWidth > 600 ? 600 : this.scrollWidth
stop() и 4 вопрос ??? что именно хотите

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

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

Огромное спасибо!

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

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