jQuery slider control for opacity

I'm trying to implement a jQuery slider control for opacity of a certain element on my web page.

Kind of like this question but with a slider.

I was wondering how I should implement this best, as I'm a little lost as how I should get started...

I'm guessing a function wouldn't be the best, would it? Defining a function and then calling it for the slider?

The jQuery documentation for the slider control is proving to be a little too complex for me for this topic, but I'm sure some of you can help clarify how to get this thing going!

Sorry the question is kind of vague, but I'm not really sure how to proceed.

I'm not sure exactly what you would like your end result to be, but here is a simple example of a slider controlling the opacity of another element on the page. I've included comments in my Javascript for the relevant parts.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Slider</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css"/>

    <script type="text/javascript">
        $(document).ready(function() {
            //Step 1: set up the slider with some options. The valid values for opacity are 0 to 1
            //Step 2: Bind an event so when you slide the slider and stop, the following function gets called
            $('#slider').slider({ min: 0, max: 1, step: 0.1, value: 1 })
                .bind("slidechange", function() {
                    //get the value of the slider with this call
                    var o = $(this).slider('value');
                    //here I am just specifying the element to change with a "made up" attribute (but don't worry, this is in the HTML specs and supported by all browsers).
                    var e = '#' + $(this).attr('data-wjs-element');
                    $(e).css('opacity', o)
                });
        });
    </script>
    <style type="text/css">
        #box { width: 200px; height: 200px; background-color: #ff0000; }
        #slider { width: 200px; }
    </style>
</head>
<body>
    <div id="slider" data-wjs-element="box"></div>
    <div id="box">
        <p>Fade with the above slider...</p>
    </div>
</body>
</html>

It's a nice code example but I revised the above code al little bit, the slider now changes the opacity immediately when start sliding and the opacity changes more smooth.`

Slider

<script type="text/javascript">
    $(document).ready(function() {
        //Step 1: set up the slider with some options. The valid values for opacity are 0 to 1
        //Step 2: Bind an event so when you slide the slider and stop, the following function gets called
        $('#slider').slider({ 
        min: 0, 
        max: 1, 
        step: 0.01, 
        value: 1,
        orientation: "vertical",
             slide: function(e,ui){
                     $('#box').css('opacity', ui.value)

             }                
        })
    });
</script>
<style type="text/css">
    #box { width: 200px; height: 200px; background-color: #ff0000; }
    #slider { width: 15px; }
</style>

Fade with the above slider...

来源：https://stackoverflow.com/questions/3644226/jquery-slider-control-for-opacity

标签

jquery

slider

opacity