jQuery docs explicitly state that
If supplied, the complete callback function is fired once the
animation is complete. This can be useful for stringing different
animations together in sequence. The callback is not sent any
arguments, but this is set to the DOM element being animated.
Hence, this works fine:
$("button").click(function () {
$(this).next("div").stop(true, true).animate({
"opacity": 1,
"top": "36px"
}, 600, function () {
$(this).fadeOut("slow", function () {
$(this).css({
"top": 0,
"display": "block",
"opacity": 0
});
});
});
});
$(this)'s next sibling that is a div is first animated in, and then with a callback it is faded out again. However...!
When using a setTimeout in the fallback, this won't work. See this fiddle.
$("button").click(function () {
$(this).next("div").stop(true, true).animate({
"opacity": 1,
"top": "36px"
}, 600, function () {
setTimeout(function () {
$(this).fadeOut("slow", function () {
$(this).css({
"top": 0,
"display": "block",
"opacity": 0
});
});
}, 2000);
});
});
I need to use $(this).next() though, because I will be having multiple buttons on the page. How can I keep the delay of 2s but still use the $(this) selector?
For jQuery's animating methods, you can use delay():
$("button").click(function () {
$(this).next("div").stop(true, true).animate({
"opacity": 1,
"top": "36px"
}, 600, function () {
$(this).delay(2000).fadeOut("slow", function () {
$(this).css({
"top": 0,
"display": "block",
"opacity": 0
});
});
});
});
JSFiddle
NOTE: The reason that setTimeout() didn't work for you, is because this isn't referring to the element that you think it is, it's referring to the window. To do that, you'll need to first create a reference to this:
JSFiddle
Also a little bit of magic. You can bind "this" to the timeout function.
http://jsfiddle.net/h6E6z/5/
setTimeout(function () {
$(this).fadeOut("slow", function () {
$(this).css({
"top": 0,
"display": "block",
"opacity": 0
});
});
}.bind(this), 2000);
You could always just store $(this) in a variable and use it in the timeout function (I use "$" in front of variables storing a dom element - that is of course totally optional, I just like it that way...):
$("button").click(function () {
$(this).next("div").stop(true, true).animate({
"opacity": 1,
"top": "36px"
}, 600, function () {
var $next_div = $(this);
setTimeout(function () {
$next_div.fadeOut("slow", function () {
$next_div.css({
"top": 0,
"display": "block",
"opacity": 0
});
});
}, 2000);
});
});
Related
I want that the title and subtitle shows up when the page loads. I tried several times to let it work but it won't.
jQuery(document).ready(function(){
jQuery('.element').bind('mouseover', function() {
jQuery(this).find('img').stop().each(function() {
jQuery(this).animate({
'opacity': 1
}, 200);
});
});
jQuery('.element').bind('mouseout', function() {
jQuery(this).find('img').stop().each(function() {
jQuery(this).animate({
'opacity': 0.4
}, 200);
});
});
jQuery('.element').on('pageload', function() {
jQuery(this).find('.title').stop().each(function() {
jQuery(this).animate({
'margin-left': 35,
'opacity': 1
}, 250);
});
jQuery(thi2s).find('.subtitle').stop().each(function() {
jQuery(this).animate({
'opacity': 1
}, 0);
jQuery(this).delay(150).animate({
'margin-left': 35
}, 250);
});
});
});
Can someone help me with this problem?
It's not entirely clear what you are trying to do, but at a first glance, I noticed this bug:
jQuery(thi2s).find('.subtitle').stop().each(function() {
// code
}
Obviously, the extraneous '2' should not be there, but I'm not sure if this small fix will create the intended behavior you are looking for.
Here's an example of how you should structure your code. You shouldn't really use the .bind() function for your events or reference elements using jQuery('.element'). Additionally the excessive use of this is unnecessary and complicates your code.
Consider this basic example:
$(document).ready(function () {
$("div").hover(
function () {
$("h2").animate({
left: 50,
opacity: 1
}, 500);
}, function () {
$("h2").animate({
left: 50,
opacity: 0.2
}, 500);
});
});
Check out this JSFiddle.
Hope this helps!
My Code (Launch in full window).
My JS Code:
$(document).ready(function () {
$("#play_buttton").hover(
function () {
$('#play_button').css({ "height": "240px", "width": "250px" });
},
function () {
$('#play_button').css({ "height": "225px", "width": "220px" });
}
);
});
I think that this code must be creating the problem.
Problem: When , I hover over the image (#play_button) , nothing happens and its height and width don't change.Can anyone tell me how do I fix that.
Thanks.
It will be play_button not play_buttton
$(document).ready(function () {
$("#play_button").hover( // Here not play_buttton
function () {
$(this).css({ "height": "240px", "width": "250px" });
},
function () {
$(this).css({ "height": "225px", "width": "220px" });
}
);
});
See this sample FIDDLE.
You can also .animate it like in this FIDDLE2
Wrong spell at $("#play_butt*t*on").hover
Here is my Code. Initially Div color is black I want it to be changed after div totally has been slided towards right but it changes instantly when i click go button. Solution please ...
$("#go").click(function () {
$("#subdiv").animate({ "left": "+=75%" }, 1500);
$('#subdiv').css("background-color", "#293955");
$("#subdiv").animate({ "left": "-=75%" }, 1500);
}
);
use a callback for the animation that manipulates the element only after the animation has finished :
$("#go").click(function () {
$("#subdiv").animate({ "left": "+=75%" }, 1500,function(){
$('#subdiv')
.css("background-color", "#293955")
.animate({ "left": "-=75%" }, 1500);
}
);
}
In the following code, the div animating in my moveit() function is waiting for the setTimeout() in the .click functions, but the p.font-size animation in moveit() is happening immediately upon the click. It's not waiting for the timeout. I'm sure it's a basic issue, but that's the level I'm at right now.
Thanks for any suggestions,
<script type="text/javascript">
$(document).ready(function(){
$("#no").click(function() {
$("#sleep").animate({"border-width": "10px"}, "fast");
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p:.sleepquestion").replaceWith("That is too bad. Tonight you will sleep better.");
setTimeout(moveit, 2000);
});
$("#yes").click(function() {
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p:.sleepquestion").replaceWith("That is great! A good night sleep is important.");
setTimeout(moveit, 2000);
});
});
</script>
<script type="text/javascript">
function moveit() {
$("#sleep").animate({"left": "10px", "width": "150px"}, "slow");
$("p.sleepquestion").animate({"font-size": "16px"}, "slow");
$("#sleepanswer").animate({ "left": "-9999px"}, "fast");
}
</script>
I think the problem may have been your use of .replaceWith(). That attempts to replace an element with another, but you've tried to replace an element with text. I think you just want to use .html() instead.
Also, you don't need to use the setTimeout() - you can use .delay() instead. And, I think your selectors p:.sleepquestion are probably not right. You can go with this:
<script type="text/javascript">
$(document).ready(function(){
$("#no").click(function() {
$("#sleep").animate({"border-width": "10px"}, "fast");
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p.sleepquestion").html("That is too bad. Tonight you will sleep better.");
moveit();
});
$("#yes").click(function() {
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p.sleepquestion").html("That is great! A good night sleep is important.");
moveit();
});
});
</script>
<script type="text/javascript">
function moveit() {
$("#sleep").delay(2000).animate({"left": "10px", "width": "150px"}, "slow");
$("p.sleepquestion").delay(2000).animate({"font-size": "16px"}, "slow");
$("#sleepanswer").delay(2000).animate({ "left": "-9999px"}, "fast");
}
</script>
I also changed .replaceWith() to .html() and changed p:.sleepquestion to p.sleepquestion.
Your function moveit could also be written like this by putting the timeout inside the function:
function moveit() {
setTimeout(function() {
$("#sleep").animate({"left": "10px", "width": "150px"}, "slow");
$("p.sleepquestion").animate({"font-size": "16px"}, "slow");
$("#sleepanswer").animate({ "left": "-9999px"}, "fast");
}, 2000);
}
I had the same issue with a function call in setTimeout() not working . I solved the issue by surrounding the function call in quotes.
For example:
$("#yes").click(function() {
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p:.sleepquestion").replaceWith("That is great! A good night sleep is important.");
setTimeout("moveit()", 2000);
});
after some tries to get this to work, i ask you, if you know where my mistake is.
This is my code until now:
$(".menu a").hover( function () {
$(this).data('timeout', setTimeout( function () {
$(this).hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
i would be happy about some help.
I tried this but it doesn't work. one more information perhaps it will make it more clear. i had the function like this before:
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
it worked but so it will be viewed imidiately. so i found this to set a timer that it show the popup only after in this example one second:
$("#hello").hover( function () {
$(this).data('timeout', setTimeout( function () {
alert('You have been hovering this element for 1000ms');
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
both worked it self but if i put them together it does nothing
Inside the setTimeout callback, this does not refer to the hovered element.
To fix this, you need to make a separate variable in the event handler, like this: (pun intended)
$(".menu a").hover( function () {
var me = $(this);
me.data('timeout', setTimeout( function () {
me.hover(function() {
me.next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
me.next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
You don't need to use me inside the inner hover handlers, but you might as well.
Theres a nice plugin that does this: hoverIntent. Replace .hover with .hoverIntent, and you wont have to deal with setting and clearing the timeout manually.