Time for action – effects in action

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)
    {
        // Unselect other tasks
        $task.siblings(".selected").removeClass("selected");
        // Select this task
        $task.addClass("selected");
    }
}

Now let's add a style in taskAtHand.css for the selected task. We will increase the padding to make the element bigger, add a border to highlight it, and change the background color:

#task-list .task.selected
{
    padding: 0.6em 0.5em;
    border: 2px solid orange;
    border-radius: 6px;
    background-color: white;
}

That's nice, but we can make it better by adding a transition. We will add the transition property to the .task class. It will ease in all property changes over one quarter of a second. This will provide some nice visual feedback to the user when they select a task:

#task-list .task
{
    /* Not shown... */
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

While we're at it, let's add one more transition. We will hide the task action buttons until the user moves the mouse over a task or selects a task. To do that, all we need to do is add a little more CSS. First, we will hide the task buttons' container element by setting its opacity property to 0 to make it transparent. Then we add the same transition properties as we did previously:

#task-list .task .tools
{
    position: absolute;
    top: 0.25em;
    right: 0.25em;
    border: 1px solid black;
    border-radius: 2px;
 opacity: 0;
 
 -webkit-transition: all 0.25s ease;
 -moz-transition: all 0.25s ease;
 -o-transition: all 0.25s ease;
 transition: all 0.25s ease;
}

Now we add a hover selector for the task element that sets the opacity property to 1 to make it opaque. This, along with the transition, will make the task buttons appear to fade in when the user hovers over a task. We also add a selector to make the task buttons show up when a task is selected (the second line in the following snippet):

#task-list .task:hover .tools,
#task-list .task.selected .tools
{
    opacity: 1;
}

Before CSS3, you could do the same thing with JavaScript using the jQuery fadeIn() and fadeOut() methods along with some mouse events, but it required considerably more code.

What just happened?

We added some CSS3 transitions to the task list to make the task item buttons fade in and out and make selected task items grow larger when clicked. We've seen that with just a few lines of CSS we can add some nice effects to our applications. Here's what our task list looks like now with Task 2 selected: