Question

I’ve got a system that takes input from a form, puts it in to a MySQL Database with PHP, and echos out everything again on another page, though the kind of navigation I’m trying to create is when you click 1 information tab, it animates and shows a slightly lower opacity, and a different background color, which I can do with jQuery’s animate and an animate plugin that works with backgroundColor. But the problem I have, is that I’ve got several of these outputs, 2 shown below:

<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>

Basically, I’m trying to get so when you click the .notetitle link, being an entire table, the animation happens, BUT when you click on another .notetitle, the current selected animation reverts to the original, while the newly clicked div animates, the problem a bit bigger, because it’s based on classes, and PHP outputs which could be infinite, so specific divs are out of the question, and that would mean having to use the $(this) elements, which is kind of confusing!

The jQuery I’ve got so far..!

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

Any ideas?

Answer 1

You can put all other objects back to the original opacity and animate just this one:

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

Or, you could keep track of the last one that animated by adding a class to it so you can reset it’s opacity later:

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