jQuery animate() controlling opacity on click
Question
here is what I want. I want when you click the button to go from 0 opacity to 1 opacity in 300 ms. The thing is, when I click on the button, it doesn't animate! It's so frustrating. Here is the code:
$(".ps").css("opacity", "0");
var showStuff = function() {
$("#div").click(function() {
$("#phi").animate({
opacity: "1"
}, 300, function() {
$("#pname").animate({
opacity: "1"
}, 300);
});
});
}
3 answers
solution1
0 ACCPTED 2015-10-14 20:23:54
The 0 and 1 are numbers and not strings. And you aren't calling showStuff() by executing the statement. If you are going to do that, you need to bind it to the event by calling the showStuff(); inside $(function () {}); .
$(".ps").css("opacity", 0);
var showStuff = function() {
$("#div").click(function() {
$("#phi").animate({
opacity: 1
}, 300, function() {
$("#pname").animate({
opacity: 1
}, 300);
});
});
}
And you need to call showStuff(); :
showStuff();
Snippet
$(".ps").css("opacity", 0); var showStuff = function() { $("#div").click(function() { $("#phi").animate({ opacity: 1 }, 300, function() { $("#pname").animate({ opacity: 1 }, 300); }); }); } showStuff();
#div {cursor: pointer;} #phi {background: #99f; padding: 15px;} #pname {background: #9f9; padding: 15px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="div">#DIV - Click Here</div> <div class="ps" id="phi">#PHI.ps</div> <div class="ps" id="pname">#PName.ps</div>
solution2
0 2015-10-14 20:40:21
If you're using jQuery why not use fadeIn() and delay()?
Here's a fiddle – https://jsfiddle.net/xge2wnw7/
$("#div").click(function() {//dumbest id name for a div ever
$("#phi").fadeIn(500);
$("#pname").delay(1500).fadeIn(500);//wait a 1.5s and fade in the next element
});
solution3
0 2015-10-14 20:56:27
If you are just starting out, you may want to think about how helpful it can be to keep things modular and the content, style, and functionality seperate. In this case, I wouldn't put an onClick in the HTML.
HTML
<div class='message-block [ js-do-something ]'>
<p class='greeting'>Hi!</p>
<p class='message'>I'm Noah</p>
</div>
JavaScript
You have the right idea storing this function in a variable. What if you had a few places where you want this functionality? You can just make up some parameter and pass it into the function, and then you can tailor each function call to different elements. Also - in your codepen - you don't need the <body> / <head> etc in the html. It is already included. Your ID's are unnecessarily overly specific - and in most cases your going to be better off with classes. Also - if you want to visually separate classes that are specifically for functionality - you can prefix the class with js- or even put them in brackets to be really sure. Anyways - those are my thoughts on the subject.
var showStuff = function(input) {
var $input = $(input);
var fadeTime = 300;
$input.on('click', function() {
$input.find('.greeting').animate({
opacity: 1
}, {
duration: fadeTime,
complete: function() {
$input.find('.message').animate({
opacity: 1
}, fadeTime);
}
});
});
};
showStuff('.js-do-something');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.