Changing CSS using Javascript Function (condensing code)

Question

I am still new to javascript (not to mention a designer, certainly not developer) so bear with me.

I wanted to use some random numbers in my CSS, and the only way I could find that fit the bill was to incorporate some Javascript to generate the random numbers and then modify the CSS. The idea is to get some slides to animate into view, rotate on hover, and animate away when clicking on another category.

I've managed to get it working in my document, both on load and called from buttons on click, but the only way I can get it to work is if I write out the full code for each instance. Each time it is the same, so when I need to change something, say a transition time, I have to do it over and over in multiple locations. It works for now but is certainly not ideal.

I wont put the full code in here (because it's absurdly long), but here's an example. I have this:

$(function() {
  $("#printLink").click(function() {

    $(".print").each(function() {
      $(this).css({
        "left":(Math.floor(Math.random()*10)-5),
        "bottom":(Math.floor(Math.random()*10)-5),
      });
    });

    $(".web, .motion").each(funtion() {
      $(this).css({
        "left":(Math.floor(Math.random()*200)-100) + '%',
        "bottom":(Math.floor(Math.random()*500)+500),
      });
    });

  });
});

Okay, so there's a button #printLink and separate groups of slides with classes .print, .web, and .motion (in the demo link below there are no slides in the motion section). The idea is that when I click on #printLink that the .print slides will move into view and the .web and .motion slides with move off screen. Like I said, I already have all of this working, but I have to specify all of the CSS again and again.

What I'd like to have is something like:

function moveIn(){
  $(this).css({
    "left":(Math.floor(Math.random()*10)-5),
    "bottom":(Math.floor(Math.random()*10)-5),
  });
}

function moveOut(){
  $(this).css({
    "left":(Math.floor(Math.random()*200)-100) + '%',
    "bottom":(Math.floor(Math.random()*500)+500),
  });
}
$(function() {
  $("#printLink").click(function() {
    $(".print").each(function() {
      moveIn();
    });
    $(".web, .motion").each(function() {
      moveOut();
    });
  });
});

This way I can just reference the same string of CSS each time, and minimize the chance for mismatched code.

Here's a reference link to give you a better idea of what I'm talking about.

Answer 1

Also, what's wrong with:

$(function() {
  $("#printLink").click(function() {
    $(".print").each(moveIn);
    $(".web, .motion").each(moveOut);
  });
});

the two functions you defined should work perfectly.

Answer 2

If you want to embrace CSS3, and didn't have the need for random numbers, you could handle this with a few classes in your CSS...

.print, .web { 
    display: absolute;
    top: 500px; left: -1000px; 
    opacity: 0.0;
    -webkit-transition: all 0.5s ease-in-out; 
}
.printOn, .webOn { 
    top: 0px; left: 0px; 
    opacity: 1.0;
}

Then your links can just toggle these classes...

$(function() {
    var $print = $('.print'), $web = $('.web');
    $("#printLink").click(function(e) {
        $print.addClass('printOn');
        $web.removeClass('webOn');
        e.preventDefault();
    });
    $("#webLink").click(function(e) {
        $web.addClass('webOn');
        $print.removeClass('printOn');
        e.preventDefault();
    });
});

Note: The "transition" property is not very well supported as of this writing. But even in a browser that doesn't support it, the links should be shown and hidden - just without any animation.