Wanna learn jQuery but you don’t know where to start from? Inline styles, predefined effects

In the last lesson we further modified our interrupter, supplying it with a unique link for switching the lamp on and off, and we saw how to apply a simple effect through the appropriate adding of a class to the desired element. But is it really necessary to foresee a CSS class for every kind of animation we plan to make?

How to modify styles “in mid-air”?

In all the examples we have made till now we have exclusively exploited the addClass and removeClass functions for applying the effects: jQuery took care of actions, and through CSS classes we applied the decorations of the desired item. From a certain point of view, it’s fair this way, for the separation between action and presentation. An intensive use of this technique, anyway, can noticeably weigh down the style sheet: for example, if I wanted to change the color of an element, I would have to foresee a basic class, with the predefined color, and an additional class with the desired color.

Certainly, there is a way to manage the styles of the items through jQuery, through the css. function. This function can be applied to every selected item, and can modify whatever css. property. The syntax is the following:

$("itemtoselect").css("property","value");

We can thus modify the JavaScript code of the last example which goes through the use of the pair addClass/removeClass:

$(document).ready(function() {
$("a#interrupter").toggle(
function() {
$("div.lamp").addClass("on");
$(this).html("turn lamp off");
},
function() {
$("div.lamp").removeClass("on");
$(this).html("Turn Lamp on");
});
});

to the use of the css function:

$(document).ready(function() {
$("a#interrupter").toggle(
function() {
$("div.lamp").css("background-color","#F8F070");
$(this).html("Turn Lamp off");
},
function() {
$("div.lamp").css("background-color","#CCCCCC");
$(this).html("Turn Lamp on");
});
});

We obtained the same result exclusively through the use of jQuery, and in this case I think it is fairer like this. In fact, the turning on of the lamp is possible only with Javascript enabled, therefore it is fair that all the management of actions relative to this element be delegated to Javascript.

The css function as it has been presented faces a limit. In fact, by means of this syntax it is possible to specify only one property at a time. If I wanted to add an edge to the lamp I have to write something like this:

$("div.lamp")
.css("background-color","#F8F070")
.css("border","1px solid black");

Obviously this is a not-so-elegant way given that it contains repetitions (short note: jQuery doesn’t keep track of spaces in the code, thus you can organize the code as you wish). To specify multiple properties we can include them in a variable, and then pass the latter as a parameter of the css function, like this:

var stylesLamp = {
"background-color" : "#F8F070",
"border" : "1px solid black"
}
$("div.lamp").css(styleLamp);

It is important to notice the differences that exist between the two methods:

  • in the first one we have two strings, delimited by inverted commas and separated by a comma: “property”,”value”
  • in the second, it is the curly brackets which delimit all the values, the strings are separated by a colon: “property” : “value”, and the various pairs are separated by commas.

Which are the predefined effects in jQuery?

As you can read in the documentation of jQuery, there are some predefined effects which we can apply to our items.  In the previous lesson we examined the fadeIn effect; in jQuery these effects exist in pairs, in fact we have:

  • the show/hide pair: the item increases/decreases in height, width and opacity
  • the fadeIn/fadeout pair: the item appears/disappears in dissolving
  • the slideUp/slideDown pair: the item appears/disappears as a drop-down, towards the top

All these functions accept as parameters “slow”, “normal”, “fast” strings, or a number, which indicates how many milliseconds the animation is supposed to last. The use of these effects is really simple: enough selecting the item and then applying , from time to time, the desired effect. Let’s make some examples with our “friend” lamp:

  ...
  $("div.lamp").css("background-color","#F8F070").fadeIn("slow");
  ...
  $("div.lamp").css("background-color","#F8F070").fadeOut("slow");
  ...
...
$("div.lamp</span></span>").css("background-color","#F8F070").show("normal");
...
$("div.lamp</span></span>").css("background-color","#F8F070").hide("fast");
...
...
$("div.lamp</span></span>").css("background-color","#F8F070").slideDown(2000);
...
$("div.lamp</span></span>").css("background-color","#F8F070").slideUp(1500);
...

Conclusions

Knowing how to modify inline styles without necessarily adding classes to the style sheets offers a wide range of possibilities. That, combined with the subject of the next lesson, that is creating personalized animations, will enable you to express all your creativity using jQuery.

      Master per Web Designer Freelance
      In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
      Scopri One Year Together »
      [pdf]Scarica articolo in PDF[/pdf]
      Tags: ,

      The Author

      Fond of web design, takes delight in creating (X)HTML+CSS layouts. A maniac of polished and tidy codes, the type of person you find in your house straightening the paintings hanging on the wall. He has made his mind of becoming a web designer with a capital “w”, and spends entire nights awake in order to make his dream come true.

      Author's web site | Other articles written by

      Related Posts

      You may be interested in the following articles:

      1 comment

      Trackback e pingback

      1. You want to learn how to use jQuery but don’t know where to start? | Your Inspiration Web
        [...] Lesson 4: inline styles, predefined effects [...]

      Leave a Reply

      Current month ye@r day *