2011-12-18 20 views
0

У меня есть система, которая принимает входные данные из формы, помещает ее в базу данных MySQL с PHP и снова выводит все на другую страницу, хотя тип навигации, которую я пытаюсь создать, - это когда вы нажимаете 1 информационная вкладка, она анимирует и показывает немного более низкую непрозрачность и другой цвет фона, который я могу сделать с анимацией jQuery и плагином анимации, который работает с backgroundColor. Но проблема у меня есть, это то, что у меня есть несколько из этих выходов, 2 показано ниже:Возврат всех анимаций в исходное состояние, прежде чем переходить к следующему?

<div id="left"> 
<div id="left-top"> 
<div id="left-top-inner"></div> 
</div> 
<div id="notes-parent-title">Your Notes</div> 
<div id="notes-container"><a href="note?id=1" target="mainframe" class="nlink"><div class="notetitle"><hr> 
<table class="left-note-title"> 
<tr> 
<td>Just giving Notr a little test run...</td> 
<td>&raquo;</td> 
</tr> 
<tr> 
<td><a id="1" class="delete">Delete</a></td> 
<td></td> 
</tr> 
</table><hr></div></a><a href="note?id=2" target="mainframe" class="nlink"><div class="notetitle"><hr> 
<table class="left-note-title"> 
<tr> 
<td>My Notr is really awesome its...</td> 
<td>&raquo;</td> 
</tr> 
<tr> 
<td><a id="2" class="delete">Delete</a></td> 
<td></td> 
</tr> 
</table><hr></div></a></div> 
</div> 

В принципе, я пытаюсь получить так, когда вы нажимаете на ссылку .notetitle, будучи вся таблица, анимация происходит, НО, когда вы нажмете на другой .notetitle, текущая выбранная анимация возвращается к оригиналу, в то время как недавно щелкнули div, анимация, проблема немного больше, потому что она основана на классах и выходах PHP, которые могут быть бесконечными, поэтому специфические divs могут быть исключены, и это будет означать необходимость использования элементов $ (this), что является путаным!

jQuery У меня до сих пор ..!

$('.notetitle').click(function(){$(this).animate({ 
    opacity: 0.7, // + Background color animation on \n 
}, 200, function() {});});</script> 

Любые идеи?

ответ

2

Вы можете поместить все другие объекты обратно к исходной непрозрачности и анимировать только этот:

$('.notetitle').click(function(){ 
    $('.notetitle').not(this).stop(true).css("opacity", "1"); 
    $(this).animate({ 
     opacity: 0.7, // + Background color animation on 
    }, 200); 
}); 

Или, вы можете следить за последним, что анимированный, добавив класс к нему, так что вы можете сбросить это непрозрачность позже:

$('.notetitle').click(function(){ 
    $('.lastNoteAnimated').stop(true).animate({opacity: 1}, 200).removeClass('.lastNoteAnimated'); 
    $(this).addClass('.lastNoteAnimated').animate({ 
     opacity: 0.7, // + Background color animation on 
    }, 200); 
}); 
+0

Эй, это была моя идея! Но у вас есть код :-) –

+0

Спасибо большое! :) Действительно помог с моим проектом. Ура! :) – unicornication

2

Вы можете stop current animation в jQuery.

Или вы можете самостоятельно восстановить оригинальные значения.

Для этого вам нужно будет выбрать элемент, который в настоящее время анимирован. Чтобы облегчить это, я предлагаю добавить специальный класс (например, currentlyAnimated) в обработчик кликов. Когда вы нажимаете другой элемент, проверьте, есть ли элементы этого класса. Если есть, остановите/верните анимацию на них. После этого вы удаляете этот класс из этих элементов и добавляете его к текущему.

+0

Ха-ха, близко догадайтесь! Спасибо за ваш ответ, тем не менее :) Приветствия! :) – unicornication

+0

Взгляд - это лучшее «спасибо» :-) –

+0

Удовлетворительно, как я использую свою новую учетную запись и не имею достаточного количества репутации для вас: ') – unicornication

Смежные вопросы