CODEWITHSUNDEEP
javascriptjqueryfadeto
Máčaj Jakub
Máčaj Jakub

Reputation: 65

fadeTo() not working

I am having troubles using fadeTo() function in jQuery. It all worked for me at the begining but it stopped working now for some unknown reasons. Here i present you code of webpage. I will appreciate if you can help me.

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

Upvotes: 0

Views: 1923

Answers (4)

Angu
Angu

Reputation: 872

Your code is right. I think the PHP file is not found. I have replaced the PHP include file (Sample Php file):

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

Upvotes: 1

nanndoj
nanndoj

Reputation: 6770

Your code is working fine. Maybe you have some problem including your php file.

Look at this fiddle

just changed this line

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

Another thing you can try is (I don't think it's the problem but I don't know what browser you are testing):

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

Upvotes: 0

Danilo
Danilo

Reputation: 2686

You are defining a function but not calling it (EDIT: I did not notice the call in your original code. It should work: http://jsfiddle.net/w3Lr0vgk/) . If you want to use fadeTo at page load simply remove the function:

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

If you want to trigger the fadeTo in another point of your code, simply call the function your defined:

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

Upvotes: 0

Jeremy Thille
Jeremy Thille

Reputation: 26410

Your code works : run it here. Click the + , it fades the word "SUBSCRIBE" in.

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>

Note : you can use .fadeIn() instead of .fadeTo(500,1)

Try this :

(HTML)

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

(JS)

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

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

Upvotes: 0

Related Questions