Im trying to control the order of my functions in jquery, on click id like an image to fade out, the source of the image to be swapped, and then the new image fade in.
I have the following that sort of works, only it does them all at once, is their a way to prevent this?
// Animate height of div containing information
$(this).animate({
'height' : '600px'
},500, function(){
$('html, body').animate({ scrollTop: $(this).offset().top });
// Fade initial image out
img.fadeOut();
// Switch to hi-red image
img.attr('src', function(i, value) {
return '_includes/images/work/hires/' + value;
});
//Fade Hi res image in
img.fadeIn();
});
fadeOut can take a complete attribute : http://api.jquery.com/fadeOut/
// Animate height of div containing information
$(this).animate({
'height' : '600px'
},500, function(){
$('html, body').animate({ scrollTop: $(this).offset().top });
// Fade initial image out
img.fadeOut(400, function() {
// Switch to hi-red image
img.attr('src', function(i, value) {
return '_includes/images/work/hires/' + value;
});
//Fade Hi res image in
img.fadeIn();
});
});
You should be able to do this with promise()
// Fade initial image out
img.fadeOut();
// Switch to hi-red image
img.promise().done(function() {
$(this).attr('src', function(i, value) { return '_includes/images/work/hires/' + value; });
});
//Fade Hi res image in
img.fadeIn();
Docs: http://api.jquery.com/promise/
You can use the 'queue' functionality of jQuery to queue up function calls.
http://api.jquery.com/queue/
You should use a callback function.
// Fade initial image out
img.fadeOut(duration, function () {
// Switch to hi-red image
img.attr('src', function(i, value) {
return '_includes/images/work/hires/' + value;
});
//Fade Hi res image in
img.fadeIn();
})
This way, once the first image had faded out, jQuery will call the anonymous function you passed as an argument.
Source: http://api.jquery.com/fadeOut/
Related
If you go to an album (eg. Nature because still working on the others) and click one of the images they all fade out and then the one you clicked appears to just show up on the screen. What is happening is that it is still fading in as the thumbnails are fading out. I tried adding the rest of the code inside a .complete(), but that seems to break it.
$(document).ready(function(){
$('.photos').on('click', function() {
var src = $(this).attr('src').replace('thumb-','');
$('.photos').stop().fadeOut(500);
$('.enlarged').remove();
$('#album').append('<img class="enlarged" src="' + src + '">');
$('.enlarged').hide();
$('.enlarged').stop().fadeIn(500).done(
$('.enlarged').on('click', function () {
$(this).stop().fadeOut({
duration: 500,
done: this.remove()
});
$('.photos').stop().fadeIn(500);
})
);
});
});
You can use promise to catch complete all fade out animation:
$(document).ready(function(){
$('.photos').on('click', function() {
var src = $(this).attr('src').replace('thumb-','');
var photos = $('.photos');
photos.stop().fadeOut(500);
photos.promise().done( function() {
$('.enlarged').remove();
$('#album').append('<img class="enlarged" src="' + src + '">');
$('.enlarged').hide();
$('.enlarged').stop().fadeIn(500).done(
$('.enlarged').on('click', function () {
$(this).stop().fadeOut({
duration: 500,
done: this.remove()
});
$('.photos').stop().fadeIn(500);
})
);
});
});
});
I'm refering animate.css from this site http://www.telegraphicsinc.com/2013/07/how-to-use-animate-css/
1- I have click function :
function animationClick(element, animation){
element = $(element);
element.click(
function() {
element.addClass('animated ' + animation);
//wait for animation to finish before removing classes
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 2000);
});
}
2- I'm called the function here,but I want to change a bit,if i'm clicking the (#container) it will animate and show (.content) below:
$(document).ready(function(){
$('#container').each(function() {
animationClick(this, 'bounce'); // how I modified this line
$('.content').show(); // I want to show and animate bounce for (.content) not (#container)
});
});
I have solved my problem :)
$(function() {
$("#container").click(function() {
$(".content").show();
animate(".content p", 'animated bounceInDown');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
I have a simple jQuery code which swaps two images by hiding one and displaying the other, I'm seeking to swap the images using a fade in fade out effect, but since the two images aren't lying on top of each other I cant simply fade the top image resulting on showing the bottom one,
I want to fade the first image then set the css display property to none then show the second image with 0 opacity and gradually set the second images opacity to 100. But when I add the code which fades the images, it doesn't work and the display none doesn't wait for the fade to finish. How can I make the functions wait for the one before to finish?
$('.thumbs').hover(
function() {
console.info('in');
$(this).children('.first').css('display','none');
$(this).children('.second').css('display','block')
},
function() {
console.info('out');
$(this).children('.second').css('display','none');
$(this).children('.first').css('display','block')
}
);
HTML Code:
<div class='thumbs'>
<div class='first'><?php the_post_thumbnail()?></div>
<div class='second'><?php MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image');?></div>
</div>
1) delay() method allows us to delay the execution of functions that follow it in the queue.
http://api.jquery.com/delay/
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
2) use callbacks
$("#divId1").animate({opacity:.1},1000,function(){
$("#divId2").animate({opacity:.1},1000);
});
Like so:
setTimeout(function() {
console.log('out');
$(this).children('.second').css('display', 'none');
$(this).children('.first').css('display', 'block');
}, 1000);
I have not tested but this should do the job:
$('.thumbs').hover(
function(){
var $that = $(this);
$(this).children('.first').fadeOut(1000, function(){
$(this).css('display','none');
$that.children('.second').fadeIn(500);
});
}
,
function(){
var $that = $(this);
$(this).children('.second').fadeOut(1000, function(){
$(this).css('display','none');
$that.children('.first').fadeIn(500);
});
}
);
Try
$('.thumbs').hover(
function() {
var second = $(this).children('.second');
$(this).children('.first').fadeOut(1000, function(){
second.fadeIn(1000,function(){});
});
},
function() {
var first= $(this).children('.first');
$(this).children('.second').fadeOut(1000, function(){
first.fadeIn(1000,function(){});
});
}
);
Working Fiddle
I have applied a fadeout affect on a background image. How do I slowly apply back the original style on mouseout?
jsfiddle: http://jsfiddle.net/KevinOrin/H6Q3J/
jQuery('.square-section').mouseover(function(){
jQuery(this).fadeTo('slow',0.3, function(){
jQuery(this).css('background-image', 'url(' + $img + ')');
}).fadeTo('slow',1);
});
You are not using the $img variable in the first place .. So the callback function is not required in the first..
The callback function might have been on help here if you are changing the image completely.
jQuery('.square-section').hover(function(){
jQuery(this).fadeTo('slow',0.3);
}, function() {
jQuery(this).fadeTo('slow',1);
});
Check Fiddle
If you want to swap 2 different images you can try this approach
jQuery('.square-section').hover(function(){
jQuery(this).fadeTo('slow', 0.3, function() {
jQuery('.square', this).removeClass('square-chess').addClass('square-chart');
jQuery(this).fadeTo('fast', 1);
});
}, function() {
jQuery(this).fadeTo('fast', 0.3, function() {
jQuery('.square', this).removeClass('square-chart').addClass('square-chess');
jQuery(this).fadeTo('fast', 1);
});
});
Fiddle with 2 images
jQuery('.square-section').hover(function () {
jQuery('.square', this).removeClass('square-chess').addClass('square-chart');
}, function () {
jQuery('.square', this).removeClass('square-chart').addClass('square-chess');
});
jQuery('.square-section').mouseout(function(){
jQuery(this).fadeTo('slow',0.3, function(){
jQuery(this).css('background-image', 'url(' + $img + ')');
}).fadeIn('slow',1);
});
I have a function that when run, animates a div on my page and removes a class, what I want to do however is remove the class at the end of the height animation, is this possible with jQuery?
var el = $(this).find('ul li');
var img = $(this).find('ul li img');
$(this).removeClass('active');
//return false;
el.animate({height:'135px'}, 500);
el.css({
'background-position':'top left',
'background-size' : 'auto auto'
});
$(this).find('ul li img').animate({height:'270px'}, 500);
$(this).animate({height:'135px'}, 500);
img.attr('src', function(i, value) {
return value.substring(28);
});
There is a complete function that runs once the animation has completed. According to the jQuery docs for the animate function, you can use it like so:
el.animate({height:'135px'}, 500, function() {
//code to run when complete goes here
});
Use the complete call like this inside the .animate function:
complete: function() { your func u wanna call when ani is complete..; }