Let's add some effects to the task list. First, we will add the ability to select a task in the list. When a task is clicked, it will grow in size and get a colored border so it's easy to tell that it is selected. We will also add a hover effect to the tasks so that when the user moves the mouse over a task, the task's action buttons are shown. When the mouse moves off of a task, the buttons will fade back out. You can find the code for this section in chapter2/example2.2.
The first thing we need to do is go back to taskAtHand.js and add a click event handler to the task element after it is created in the addTaskElement() method:
$task.click(function() { onSelectTask($task); });It calls the onSelectTask() method when a task is clicked. In this method we will mark a task element as selected by giving it a class name of selected. We will also remove the selected class from the previously selected task element:
function onSelectTask($task)
{
if ($task)
...