jQuery curseur de contrôle de l'opacité

Je suis en train de mettre en œuvre un jQuery curseur de contrôle de l'opacité d'un élément sur ma page web.

Un peu comme cette question mais avec un curseur.

Je me demandais comment je dois les mettre en œuvre ce mieux, car je suis un peu perdu, comment je devrais commencer...

Je devine une fonction ne serait pas la meilleure, ne serait-il? La définition d'une fonction et de son appel pour le curseur?

La jQuery documentation pour le contrôle de curseur s'avère être un peu trop complexe pour moi pour ce sujet, mais je suis sûr que certains d'entre vous peuvent aider à clarifier la façon d'obtenir cette chose va!

Désolé de la question est vague, mais je ne suis pas vraiment sûr de savoir comment procéder.

OriginalL'auteur Qcom | 2010-09-04

  1. 8

    Je ne suis pas sûr exactement ce que vous voulez que votre résultat final, mais voici un exemple simple d'un curseur de contrôle de l'opacité d'un autre élément sur la page. J'ai inclus des commentaires dans mon code Javascript pour les parties concernées.

    <!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>
    Merci beaucoup soo! Votre code est très bien expliqué, et un assez bon exemple de utile de commenter! 🙂 Merci encore. Maintenant, je comprends enfin comment travailler avec les curseurs, et la fonction de liaison est très utile aussi.

    OriginalL'auteur wsanville

  2. 8

    C'est un bel exemple de code mais j'ai revu le code ci-dessus coll peu, le curseur change maintenant l'opacité immédiatement dès le début de glissement et de l'opacité des changements les plus lisse.`

    Curseur 

    <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>

    Fondu avec le curseur au-dessus de...

    `

    Merci pour l'aide, même si la question est déjà y répondre! 🙂
    Ce code est mieux. var o = $(this).slider('value'); ne fonctionne pas correctement lorsque vous faites glisser le curseur vers la gauche. L'utilisation de function(e,ui){ var 0 = ui.value; } permettra d'éviter cette erreur.

    OriginalL'auteur Baez