Question

I’m new to jquery and javascript, but I am looking to do what I think should be a relatively simple task. I want to use the UI Slider widget to control certain actions. Get to value 100, show an image. Get to value 200, destroy the previous image, play a new animation (or show an image). This is what I have written so far: http://jsfiddle.net/LGMHP/14/

Am I going about this completely the wrong way?

Answer 1

Looks like you were missing some dollar signs in front of your jQuery variables. Try:

$("#slider").slider({
    animate: true,
    min: 0,
    max: 500,
    step: 100,
    slide: function(event, ui) {
        if (ui.value == 100) {
            $('#green').hide();
        };
        if (ui.value == 200) {
            $('#green').hide();
            $('#red').show();
        };

        $("#hour").text(ui.value);
    }
});​

jsFiddle example.