Alright, I maybe a bit to strung out from caffeine atm to figure this one out on my own, but i'm trying to figure out how to redirect visitors to a page after splash image has faded.
$(document).ready(
function
()
{$('.wrapper a img').hover(
function ()
{
$(this).stop().animate({ opacity: .4 } , 200);
settimeout(function(){window.location = '/blog';}, 200);
}
)});
It's not working and is drving me a bit nutt
.animate allows you to define a callback that will be invoked when the animation is complete:
$(this).stop().animate({ opacity: .4 } , 200, "swing", function() {
window.location = '/blog';
});
The third argument ("swing") is simply the default for that parameter.
An alternative syntax for the same is
.animate({ opacity: .4 }, {
duration: 200,
complete: function() { window.location = '/blog'; }
);
Finally, yet another way is to use a .promise that will be completed when the animation queue for the element is empty (i.e. all animations have ended):
.animate({ opacity: .4 } , 200)
.promise().done(function() { window.location = '/blog'; });
Related
I'm using the following to fade in and fade out elements on hover:
$(".hidden").hover(function() {
$(this).animate({
opacity: 1
});
}, function() {
$(this).animate({
opacity: 0
});
});
I would like to add a delay between opacity 1 and opacity 0 (wait a moment and then fade out the element).
How can I accomplish that?
$(".hidden").hover(function() {
$(this).animate({
opacity: 1
});
}, function() {
var _this = $(this);
setTimeout(function (){
_this.animate({
opacity:0
});
},1000)
});
Yuu can use the .delay() function http://api.jquery.com/delay/.
$(".hidden").hover(function() {
$(this).delay(1000).animate({
opacity: 1
});
}, function() {
$(this).delay(1000).animate({
opacity: 0
});
});
http://jsfiddle.net/gk14nqrx/
This will delay 1 second before fading out. You need to store a reference to $(this) because inside of setTimeout the this is no longer the DOM element.
$(".hidden").hover(function() {
$(this).animate({
opacity: 1
});
}, function() {
var that = $(this);
setTimeout(function() {
$(this).animate({
opacity: 0
});
}, 1000);
});
I want to implement a jQuery animation callback method progress or step,
but in either case I'm getting the following error:
NS_ERROR_IN_PROGRESS: Component returned failure code: 0x804b000f (NS_ERROR_IN_PROGRESS) [nsICacheEntry.dataSize]
I searched a lot but not able to find anything in context, I am kind of stuck here, please suggest what could cause this error?
In fiddle i tried with step and progress and its working there , but not able to get it worked in my code, I am just looking, has some one faced such kind of error in jquery animation?
The sample code is:
this.taskHandle.find('img').stop(true, true).animate({
//todo//
top: vtop, // this.taskHandle.outerHeight(),
//'top': 0 - $('.target.upper').height(),
width: 0,
opacity: 0
}, {
duration: 2000,
step: function(){
console.log('I am called');
}
},
$.proxy(function() {
// some css clearing method
}, {
// some further actions after animation completes
})
);
You have some semantic errors going on here. I'm going to repost your code, formatted for easier reading:
this.taskHandle.find('img')
.stop(true, true)
.animate(
{
//todo//
top: vtop , // this.taskHandle.outerHeight(),
//'top' : 0 - $('.target.upper').height(),
width : 0,
opacity : 0
},
{
duration:2000,
step: function() {
console.log('I am called');
}
},
$.proxy(
function() {
// some css clearing method
},
{
// some further actions after animation completes
}
)
);
First: animate() doesn't accept 3 parameters (at least not those 3 parameters). I'm not sure what you are trying to do with your css clearing method, but anything you wan't to happen after the animation is complete should be in the complete method that you add right next to the step method.
Second: $.proxy() needs to have the context in which you want it to run as the second parameter, not some other"complete"-function.
So here is a slightly modified example which works. You can try it yourself in this fiddle.
var vtop = 100;
$('div')
.stop(true, true)
.animate(
{
top: vtop,
width: 0,
opacity : 0
},
{
duration: 2000,
step: function() {
console.log('I am called');
},
complete: function () {
alert('complete');// some further actions after animation completes
}
}
);
You could use Julian Shapiro's Velocity.js, which animations are (arguable) faster than jQuery and CSS (read this for more)
It allows you to use callbacks such as :
begin
progress
complete
like :
var vtop = 100;
jQuery(document).ready(function ($) {
$('div').find("img").velocity({
top: vtop,
width: 0,
opacity: 0
}, {
duration: 2000,
begin: function (elements) {
console.log('begin');
},
progress: function (elements, percentComplete, timeRemaining, timeStart) {
$("#log").html("<p>Progress: " + (percentComplete * 100) + "% - " + timeRemaining + "ms remaining!</p>");
},
complete: function (elements) {
// some further actions after animation completes
console.log('completed');
$.proxy( ... ); // some css clearing method
}
});
}); // ready
Notice that you just need to replace .animate() by .velocity()
See JSFIDDLE
So I am trying to animate .load('content.html') function by doing this.
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0,
}, 300, function() {
$('#main-container').load('./content/' + c + '.html');
$(this).stop().animate({
opacity: 1,
}, 600);
});
}
It is pretty straight forward, I want to animate opacity to 0, load new content and animate opacity back to 1. The problem is that content loads immediately after function is called so content changes before 'opacity 0' happens. I tried also this piece of code
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0,
}, 300, function() {
setTimeout(function() {
$('#main-container').load('./content/' + c + '.html');
}, 600);
$(this).stop().animate({
opacity: 1,
}, 600);
});
}
But it is same result. Any hints?
I think it has something to do with .animation() event being asynchronous.
Both codes above, and both answers work just fine I had typo in my code (as whole) so I was calling .load() function before loadContent(c) itself, result was that content loaded immediately, animation started -> content loaded second time -> animation ended.
You need to pass your last animation as a callback function to load():
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0
}, 300, function() {
$('#main-container').load('./content/' + c + '.html', function() {
$(this).stop().animate({
opacity: 1
}, 600);
});
});
}
Here's a Fiddle: http://jsfiddle.net/Lp728/
how about:
function loadContentCOMMAS(c) {
$('#main-container').stop().animate({
opacity: 0
}, 300);
$('#main-container').promise().done(function () {
$('#main-container').load(c,function () {;
$(this).stop().animate({
opacity: 1
}, 600);
});
});
}
EDIT:
here is a FIDDLE
I am using jQuery to slide something down and fade something else out, but in testing it, I've noticed that the fading appears too long after the sliding happens.
In other words, there is enough of a lag that it is noticeable.
Just to make myself clear, these two items which I am sliding one and fading the other are different elements and I can not use chaining.
Is there any way to get these functions to run at the same time or closer together so that they appear they are running at the same time ?
Here is the jQuery code that I am using:
$(document).ready(function(){
$('#trigger').click( function(){
$(this).animate({ opacity: 0.0 }); // fade
$('#carousel').animate({ top: '100px' }); // slide
$('#pullrefresh').css('top', '-490px'); // line 5
$('#detector').hide(); // line 6
});
});
The fade and the slide are happening at different times, line 5 and the slide seem to be occurring at the same time.
They should run together if you do it like:
$('#element1').animate({
opacity: 0.25,
}, 1000, function() {
// complete
});
$('#element2').animate({
opacity: 0,
}, 1000, function() {
// complete
});
try this
$(document).ready(function(){
$('#trigger').click( function(){
$(this).animate({ opacity: 0.0 },1000); // fade
$('#carousel').animate({ top: '100px' }); // slide
$('#pullrefresh').css('top', '-490px'); // line 5
$('#detector').hide(); // line 6
});
});
specify the time 1000 for animate
$(document).ready(function(){
$('#trigger').click( function(){
$.Deferred(function(dfr) {
dfr.pipe(function() {
return $(this).animate({ opacity: 0.0 }); // fade
}).
pipe(function() {
return $('#carousel').animate({ top: '100px' }); // slide
})
pipe(function() {
return $('#pullrefresh').css('top', '-490px'); // line 5
}).
pipe(function() {
return $('#detector').hide(); // line 6
});
}).resolve();
});
});
It'd be nicer if you set up a fiddle.
If your DOM is large, you can minimally reduce the delay by doing the lookup ahead of time:
$(document).ready(function(){
$('#trigger').click( function(){
var vars = { $this : $(this),
$carousel : $('#carousel'),
$pullrefresh : $('#pullrefresh'),
$detector : $('#detector')
};
vars.$this.animate({ opacity: 0.0 },1000); // fade
vars.$carousel.animate({ top: '100px' }); // slide
vars.$pullrefresh.css('top', '-490px'); // line 5
vars.$detector.hide(); // line 6
});
});
http://wesbos.com/tf/shutterflow/?cat=3
when one hovers over an image .cover is faded in. I use jquery to change the opacity because CSS doesn't work in IE for this purpose.
My code is:
$(document).ready(function () {
$('.slide').hover(function () {
$(".cover").animate({
opacity: 0.7
}, 300).fadeIn('300');
}, function () {
$(".cover").animate({
opacity: 0
}, 300).fadeOut('300');
});
});
I want the fade in to be instant, not wait 1 second. Any ideas?
You have two different animations happening sequentially: first, .animate({ opacity: 0.7 }, 300) and second .fadeIn(300). Since those are competing effects, it's probably not helping anything to have them both running.
If .fadeIn() will do what you want, try just using that:
$(document).ready(function() {
$('.slide').hover(
function() { $(".cover").fadeIn('300'); },
function() { $(".cover").fadeOut('300'); }
);
});