Home/ Questions/Q 8656837
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T15:22:38+00:00

Here is a JSFIDDLE about my problem. I want to drag the slider (with

  • 0

Here is a JSFIDDLE about my problem.

I want to drag the slider (with speech bubble above it) left and right. As it slides between the blue and green colours on the bar behind it, it will set the opacity of image 1 to 90% and the opacity of image 2 to 10%, image1 80% image 2 20%, image 1 70% - image2 30% etc till the slider reaches end of green and the opacity of image 1 is set to 0% and image 2 to 100%, then as the slider keeps sliding to the right, from green to red, image 2 reaches 0% and image 3 is 100%. Repeat with the next image.

I’ve looked at http://jqueryui.com/demos/slider/ which seems to do what I want, but I’m not sure how to get the X position of the slider, then apply that to the opacity of image1, image2, image3, image4.

The slider is 960px wide, so 960 / 4 = 240, for each 240 pixels along the slider the opacity needs to be set from 0-100%.

Firstly, is this possible in jquery? Secondly, can anyone help with the code or show me some links which may help?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Slider</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        $( "#slider" ).slider({

        range: "min",
                 value: 0,
                 min: 0,
                 max: 10,

                 slide: function (event, ui) {
                     var r = (ui.value); 
                     $("#img1").css({'opacity':r/10});
                     $("#img2").css({'opacity':1-(r/10)});
}   
    })
    });
    </script>
</head>
<body>
<img id = "img1" src = "http://www.gettyimages.com/images/marketing/frontdoorStill/PanoramicImagesRM/FD_image.jpg" style = "height:200px; width:200px">
<img id = "img2" src = "http://www.gettyimages.com/images/marketing/frontdoorStill/PanoramicImagesRM/FD_image.jpg" style = "height:200px; width:200px">
<div id="slider" style = "height:10px; width:400px" ></div>
</body>
</html>
    • 0