Question

bellow是我尝试使用jquery mobile中的滑块小部件更改图像的不透明度。但到目前为止，这段代码没有任何反应。我的代码出了什么问题？感谢

脚本：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Base template</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
        <script src="js/jquery-1.7.2.min.js"></script>
        <script src="js/jquery.mobile-1.1.0.min.js">

          $(document).ready(function(){
           $('#slider-0').click(function(){
            $("img").fadeTo(1000,0.4);
             });
             });
        </script>

    </head>
    <body>
        <div data-role="header">
         <h3>Change image opacity</h3>
        </div>
          <div data-role="content" class="ui-content">
            <label for="slider-0">Input slider:</label>
            <input type="range" name="slider-0" id="slider-0" value="60" min="0" max="100" />
            <img src="images/int-mountain-day.jpg" />
          </div>


    </body> 
    </html>

Answer 1

您需要侦听onchange事件，然后使用输入值设置新的不透明度：

$(function() {
    $('#slider-0').change(function () {
        $("img").stop(true).fadeTo(1000, this.value / 100);
    });
});

注意：您需要将值除以100以适应0-1范围。您还需要使用.stop方法停止当前正在运行的不透明动画。

演示：http://jsfiddle.net/xzssb5y6/1

<强> UPD 即可。 @Omar在评论中提出了一个有效的观点，即通常的$(function() {})文档就绪包装器，使用jQuery Mobile pagecreate事件更可靠：

$(document).on("pagecreate", "#page2", function () {
    $('#slider-0').change(function () {
        $("img").stop(true).fadeTo(1000, this.value / 100);
    });        
});

在jquery mobile中更改图像不透明度

1 个答案:

演示：http://jsfiddle.net/xzssb5y6/1