JSS — Command Reference

  • alert message1 [message2] …

    Alerts the messages in a JavaScript alert pop-up. If multiple messages are defined, they’ll be concatenated together. 

    $.jss.declare({
  "#example":
  {
    click: "alert This is an alert.",
    click: "alert 'This is the same alert.'"
  }
});
  • fade-in [(selector)] [speed] [!callback]

    Fade in all matched elements by adjusting their opacity and firing an optional callback after completion. 

    $.jss.declare({
  "#example":
  {
    // Fade in #example when clicked.
    click: "fade-in",
 
    // Fade in #fade-in-target when clicked.
    click: "fade-in (#fade-in-target)",
 
    // Fade in #fade-in-target fast when clicked.
    click: "fade-in (#fade-in-target) fast",
 
    // Fade in #fade-in-target over 1000 ms when clicked.
    click: "fade-in (#fade-in-target) 1000"
  }
});
  • fade-out [(selector)] [speed] [!callback]

    Fade out all matched elements by adjusting their opacity to 0, then setting display to “none” and firing an optional callback after completion. 

    $.jss.declare({
  "#example":
  {
    // Fade out #example when clicked.
    click: "fade-out",
 
    // Fade out #fade-out-target when clicked.
    click: "fade-out (#fade-out-target)",
 
    // Fade out #fade-out-target fast when clicked.
    click: "fade-out (#fade-out-target) fast",
 
    // Fade out #fade-out-target over 1000 ms when clicked.
    click: "fade-out (#fade-out-target) 1000"
  }
});
  • fade-to [(selector)] opacity speed [!callback]

    Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
    Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them. 

    $.jss.declare({
  "#example":
  {
    // Fade out #example when clicked.
    click: "fade-to 0",
 
    // Fade #fade-to-target to 50% opacity when clicked.
    click: "fade-to (#fade-to-target) 0.5",
 
    // Fade out #fade-to-target fast when clicked.
    click: "fade-to (#fade-to-target) 0 fast",
 
    // Fade #fade-to-target to 50% opacity over 1000 ms when clicked.
    click: "fade-to (#fade-to-target) 0.5 1000"
  }
});
  • slide-down [(selector)] [speed] [!callback]

    Reveal all matched elements by adjusting their height and firing an optional callback after completion. 

    $.jss.declare({
  "#example":
  {   
    // Slide #slide-down-target down.
    click: "slide-down (#slide-down-target)",
 
    // Slide #slide-down-target down fast when clicked.
    click: "slide-down (#slide-down-target) fast",
 
    // Slide #slide-down-target down over 1000 ms when clicked.
    click: "slide-down (#slide-down-target) 1000"
  }
});

1 Comment so far

  1. Cameron McKay » JSS 1.0.0-beta 2 released! on May 24th, 2009

    [...] also started writing documentation for the JSS commands. It is only partially completed but can still be helpful. Check out the JSS homepage for other [...]

Leave a reply