Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.08.2014, 01:40
Новичок на форуме
Отправить личное сообщение для mastanggt Посмотреть профиль Найти все сообщения от mastanggt
 
Регистрация: 24.07.2014
Сообщений: 8

Появление и исчезновение элемента на странице.
Добрый день.
Имеется таблица каких-то событий - Ссылка
При нажатии на кнопку "Правила" появляются правила связанные с определенным событием - Ссылка.
При нажатии на кнопку, таблица с правилами должна выезжать снизу события.
Когда нажимаешь на кнопку "Правила" другого события, уже открытые должны свернуться и исчезнуть, и только после этого должна вылезти другая таблица с правилами.
Собственно в этом и вопрос, как это сделать.
У меня не получается сделать анимацию выезжания, сделал пока-что просто опасити, но как сделать анимацию убирания уже открытых таблиц, а потом добавления нового я не знаю.

Вот мой код.
Пробовал делать по разному, не получается


$('button.tableGetRules').click(function () {

		var $btn = $(this);
		var id = $btn.data('id');

		$.post('tableEvents/getRules/', {
				event_id: id
			},
			function (data) {
				if (data['errors']) {
					alert(data['errors']['event_id']);
					return;
				}

				$(".rulesForEvents").hide("slow", function () {
					$('.rulesForEvents').remove();
				});
				$('.colored').css({'background-color': ''});
				$btn.parent().parent().addClass('colored').css({'background-color': '#FFFACD'});
				$btn.parent().parent().after(
					"<tr class='rulesForEvents' style='opacity: 0;'><td colspan='4' style='background-color: #FFFACD; '><div class='test' style='margin-left: 35px;  '>" + data + "</div></td></tr>"
				);

				$(".rulesForEvents").animate({'opacity': '1'}, 1000);




			}
		);

	});
Ответить с цитированием
  #2 (permalink)  
Старый 01.08.2014, 15:14
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,668

mastanggt, попробуй так:
<style>
tr.active{background:#FFFACD}
div.rulesForEvents{display:none;margin-left:35px;}
</style>

<script>
$('button.tableGetRules').click({x:0},function(e){
	if (e.data.x != this) {
		if (e.data.x) {
			$(e.data.x)
				.closest('tr')
				.removeClass('active')
				.next()
				.find('.rulesForEvents')
				.slideUp(500,function(){
					$(this).closest('tr').remove();
				});
		}
		var $btn = $(this);
		var $act = $btn.closest('tr').addClass('active');
		$.post(
			'tableEvents/getRules/',
			{ event_id: $btn.data('id') },
			function(data){
				if (data['errors']) {
					alert(data['errors']['event_id']);
					return;
				}
				$act.after('<tr class="active"><td colspan="4"><div class="rulesForEvents">'+data+'</div></td></tr>')
					.next()
					.find('.rulesForEvents')
					.slideDown(500);
			});
		e.data.x = this;
	}
});
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 01.08.2014, 16:28
Новичок на форуме
Отправить личное сообщение для mastanggt Посмотреть профиль Найти все сообщения от mastanggt
 
Регистрация: 24.07.2014
Сообщений: 8

Круто, работает, только не понятно откуда берется e, ведь мы при клике ничего не передаем в функцию.
И не работает background-color на tr почемуто
Ответить с цитированием
  #4 (permalink)  
Старый 01.08.2014, 17:29
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,668

Сообщение от mastanggt Посмотреть сообщение
только не понятно откуда берется e, ведь мы при клике ничего не передаем в функцию.
почитай про события в js
Сообщение от mastanggt Посмотреть сообщение
И не работает background-color на tr почемуто
хз в моем примере всё работает
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как отследить появление элемента на странице? рони Общие вопросы Javascript 18 23.06.2020 09:18
Появление исчезновение элемента при прокрутке страницы JQuery -=Женька=- Общие вопросы Javascript 3 29.06.2014 17:18
как отследить появление элемента на чужой странице Udik Events/DOM/Window 3 17.08.2013 06:01
Абсолютная позиция элемента на странице Ponomareva_AS Общие вопросы Javascript 2 16.01.2012 18:35
Обновление элемента на странице ajax-ом Urfin jQuery 1 24.07.2009 18:40