fadeTo() 不工作

fadeTo() not working

我在 jQuery 中使用 fadeTo() 函数时遇到问题。一开始这一切都对我有用,但由于某些未知原因现在停止工作了。在这里,我向您展示网页代码。如果你能帮助我,我将不胜感激。

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/subscribe.css" />
<script type="text/javascript" src="js/jQuery.js"></script>
<script>
$(document).ready(function(){
subscribe = function(){
 $('#subscribe').fadeTo(500,1);
};
});
</script>
</head>

<body style="background:#fff;">
<a href="#" id="plus" onClick="subscribe();">+</a>
<div id="subscribe" style="opacity:0;"><?php include('subscribe.php'); ?></div>
<!--<video id="bgvid" width="100%" height="100%" style="position:absolute;opacity:1;" autoplay loop muted>
<source src="css/7dayz.mp4" type="video/mp4"></video>-->
<div id="wrapper_main" style="opacity:1;">
 <div id="center_main">
  <p><a href="#">LOOK</a></p>
  <p><a href="#">SHOP</a></p>
  <p><a href="#">JOURNAL</a></p>
 </div> 
</div>

</body>
</html>

您正在定义一个函数但没有调用它(编辑:我没有注意到您原始代码中的调用。它应该工作:http://jsfiddle.net/w3Lr0vgk/)。如果你想在页面加载时使用 fadeTo,只需删除函数:

$(document).ready(function(){
    $('#subscribe').fadeTo(500,1);
});

如果您想在代码的另一点触发 fadeTo,只需调用您定义的函数:

$(document).ready(function(){
    subscribe = function(){
        $('#subscribe').fadeTo(500,1);
    };
    subscribe();
});

你的代码是正确的。我认为找不到 PHP 文件。我已经替换了 PHP 包含文件(示例 Php 文件):

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/subscribe.css" />
  <script type="text/javascript" src="js/jQuery.js"></script>
  <script>
  $(document).ready(function() {
    subscribe = function() {
      $('#subscribe').fadeTo(500, 1);
    };
  });
  </script>
</head>
<body style="background:#fff;">
  <a href="#" id="plus" onClick="subscribe();">+</a>
  <div id="subscribe" style="opacity:0;">Sample Php file </div>
  <!--<video id="bgvid" width="100%" height="100%" style="position:absolute;opacity:1;" autoplay loop muted>
  <source src="css/7dayz.mp4" type="video/mp4"></video>-->
  <div id="wrapper_main" style="opacity:1;">
    <div id="center_main">
      <p><a href="#">LOOK</a></p>
      <p><a href="#">SHOP</a></p>
      <p><a href="#">JOURNAL</a></p>
    </div>  
  </div>
</body>
</html>

您的代码有效:运行 在这里。单击 + ,它会淡化 "SUBSCRIBE" 中的单词。

subscribe = function(){
 $('#subscribe').fadeTo(500,1);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="plus" onClick="subscribe();">+</a>
<div id="subscribe" style="opacity:0;">SUBSCRIBE</div>

<div id="wrapper_main" style="opacity:1;">
 <div id="center_main">
  <p><a href="#">LOOK</a></p>
  <p><a href="#">SHOP</a></p>
  <p><a href="#">JOURNAL</a></p>
 </div> 
</div>

注意:您可以使用 .fadeIn() 而不是 .fadeTo(500,1)

试试这个:

(HTML)

<a href="#" id="plus">+</a>

(JS)

subscribe = function(){
        $('#subscribe').fadeIn();
    };

$("a#plus").click(subscribe)

您的代码运行良好。也许您在 php 文件中遇到了一些问题。

看看这个fiddle

刚刚更改了这一行

<div id="subscribe" style="opacity:0;">asdasdasdasd</div>

您可以尝试的另一件事是(我不认为这是问题所在,但我不知道您正在测试什么浏览器):

<a href="javascript:void(0)" id="plus" onClick="subscribe();">+</a>