.fadeTo 不适用于我的代码,但可以在 w3School 上使用相同的代码正常工作。为什么?

.fadeTo not working on my code, but works fine with same code on w3School. Why?

所以基本上这适用于 w3School,但不适用于我的实际环境。这是代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
        <title>Vecta Corp. Mobile</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
          <script>
    $(document).ready(function(){
        $("#5").click(function(){
            $("#yourview").fadeTo(1000, 0.05);
        });
    });

        </script>
    </head>

    <body>
    <section data-role="content">

            <h2>Dr. Tint SolarPill Tint</h2>
            <h3>See how SolarPill looks from inside your tinted car</h3>

            <p><img alt="" src="images/tintshade.png" id="yourview" style="width:347px;"></p>
<p style="width:350px;">
<input id="5" value="5%"  style="font-size:12px;width: 36px;margin-left: 18px;" type="button">

</p>


        </section>
    </div>
</body>
</html>

这是:w3school link 并将此代码粘贴到其中并自己尝试:

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#5").click(function(){
        $("#yourview").fadeTo(1000, 0.4);
    });
});
</script>
</head>
<body>

<p><img alt="" src="http://www.mobile-tinting.com/img.png" id="yourview" style="width:347px;"></p>

<input id="5" value="5%" style="font-size:12px;width: 36px;margin-left: 18px;" type="button">
</body>
</html>

这是否与 jquery 移动冲突,因为这实际上是两个代码之间的唯一区别。或者我在这里做错了什么?

我刚刚就此举了几个例子Codepen。按钮输入无法点击似乎是一个常见问题(这似乎是由于 jQuery Mobile)。您可以尝试其他一些方法来实现您想要做的事情:

  1. 改为使用 <button> 标签
  2. 使用 <a> 标签,将 data-role 属性设置为 button,使其采用按钮样式。