Changing the order of events in Jquery - javascript

So I created some pop-up code that will contain specific information from each link clicked in the pop-up. When closed, the content in the pop-up div gets deleted. Here is my code:
var $content = $('#popupcontent');
var $window = $('#popupwindow');
$('.open').click(function(){
//alert('runnning');
var a = $(this).contents('span');
$content.append(a);
$window.fadeIn(300);
});
$('.close').click(function(){
//alert('running');
var a = $content.contents('span');
$window.fadeOut(300);
$('#popupcontent span').remove();
});
My issue is that it is somehow removing the content before fading out, so the viewer can then see that the pop-up container goes blank. How can I make it so that it will surely fade out first and then remove the content? Here is a Jsfiddle to illustrate that: http://jsfiddle.net/kAdQK/4/

You may want to utilize the complete call back argument for the fadeout method, to remove the element once fadeout is completed. With your current code it will start the fadeout animation and then immediately remove the content without waiting for fadeout animation to complete, hence you get the visual effect that you are seeing now. Using the callback you make sure that it gets executed once the animation is complete.
$window.fadeOut(300, function () {
$('#popupcontent span').remove();
});
Syntax
.fadeOut( [duration ] [, complete ] )
Fiddle

You can use the animation complete to remove your element after the fadeout ends.
The following code will ensure that #popupcontent is removed only after it's faded out
$window.fadeOut('slow', function() {
$('#popupcontent span').remove();
});

Just use a setTimeout();
$window.fadeOut(300);
setTimeout(function(){
$('#popupcontent span').remove();},2000);
Example Here

Related

jQuery: fade out, change background image, then fade in

I'm trying to fade the container div around this target div, then change the background, then fade it back in. The problem is that all the functions in this block are called instantaneously, which means the background is swapped out immediately, then the div fades out and in. Not sure how to implement this as a stepped operation.
For now, don't worry about the "myType" part. I have a dropdown menu on the page that you select which changes the background image in the div to a different image based on the selection. I've removed that functionality from this code, since it isn't actually relevant.
HTML:
<div id="itemCustomize">
<div id="itemBaseImg"></div>
</div>
jQuery:
$(myType).change(function() {
$("#itemCustomize").fadeOut(500);
$("#itemBaseImg").css('background-image', 'url(myimage.jpg)';
$("#itemCustomize").fadeIn(500);
}
Update:
The true implementation is actually different. I should have considered that. I have an array of images which I generate an image URL from by parsing the base URL with the variable "url", then add the base image part of the URL by calling on an index. This worked before it was wrapped in a callback function, but now that I want to fade in and out the wrapper div, it doesn't work.
$(myType).change(function() {
$("#itemCustomize").fadeOut(500, function() {
$("#itemBaseImg").css('background-image', url + itemBaseImg[myType.selectedIndex] + ")");
});
$("#itemCustomize").fadeIn(500);
});
You can use the complete callback on jQuery fadeOut function to make them run one after another.
$(select).change(function() {
$("#containerdiv").fadeOut(500, function() {
$("#targetdiv").css('background-image', 'url(myimage.jpg)';
$("#containerdiv").fadeIn(500);
});
}
See: http://api.jquery.com/fadeout/
I figured it out. I needed to create a variable to pass into the index. Thanks for everyone's help!
$(myType).change(function() {
var myIndex = this.selectedIndex;
$("#itemCustomize").fadeOut(50, function() {
$("#itemBaseImg").css('background-image', url + itemBaseImg[myIndex] + ")");
$("#itemCustomize").fadeIn(200);
});
});

jquery, time out another jquery function if a user clicks a div?

I have the following script which fades in multiple divs called 'noti_box'. If a user closes these divs then another div 'advert' fades in in its place.
<script>
$(document).ready(function(){
var animations = [];
$('.noti_box').each(function(i) {
animations.push(
$(this).hide().delay(i * 1000).fadeIn(1500).promise()
);
});
$.when.apply($, animations).done(function () {
time=setInterval(function(){
if ( $('.noti_box:visible').length === 0 ) {
$(".advert").fadeIn("slow");
} },200);
});
});
</script>
this works fine, basically what happens here is my last function is stuck on a loop, where the 'advert' div fades in when 'noti_box' is not visible on the page.
However, now I want a user to click a div called 'icons' and if they do, then this should re-fade in the 'noti_box' divs and fade out the 'advert' div using this code:
<script>
$('.icons').click(function(){
$('.advert').fadeOut('fast');
$('.noti_box).fadeIn('fast');
});
</script>
The problem I have here is the 'advert' div fades in and out again in the blink of an eye, without fading in my 'noti_box' div. This is because my first javascript function is still on a loop and preventing my second script from executing.
So what I need to do, I think is set a time out interval for my first script when a user clicks my div 'icon' and then clear the time out interval once the script has executed and the 'noti_box' divs are once again showing.
Can someone please show me how I would be able to do this as I am brand new to jquery. Thanks
function notiBox(ele){
this.ele=ele;
this.ele.hide().fadeIn('slow');
console.log("I have been born! "+ele);
}
notiBox.prototype={
constructor:notiBox,
advert:function(){
var ele=this.ele;
this.ele.fadeOut('fast',function(){ele.next('.advert').fadeIn('slow');});
},
fadeBack:function(){
var ele=this.ele;
this.ele.next('.advert').fadeOut('slow',function(){ele.fadeIn('slow');});
},
}
$(document).ready(function(){
var timeIn=1;
$('.noti-box').each(function(){
var self=this;
this.timer=setInterval(function(){self.notiBox=new notiBox($(self));clearInterval(self.timer);},1000*timeIn);
timeIn++;
});
$('.icon').click(function(){
$('.noti-box').notiBox.fadeBack();
});
});
Right the above is a 'OOP' based approach to your problem. The only problem you might have with this is that your advert divs are not next to the box div. Sorry I guess your DOM elements and layout. Also my methods my not be correct because it's been so long since I've written something like that. I'll do some tests. In the mean time, could you put up some HTML? So that I can adjust my code :d

jQuery UI Slide - Move content during animation

I'm building a website which relies on jQuery effects and I have a problem with the jQuery Slide effect.
I'm using that through a toggle function for the moment, but that will change in a later stage.
The fact is that I'm hinding an element when a certain action is executed. When you use the function slide the content beneath those elements moves when the animation is completed to take up the free space which was created with the effect.
The problem is that the content is only moved as soon as the animation is completed. Is there any way to move the content when the animation is still running. With other words, I want to move the content together with the animation, but I don't want to call the slide function on my element that should move with it.
I've created a JSFiddle to demonstrate the problem: http://jsfiddle.net/6Lg9vL8m/6/
Edit: Question update and fiddle
Here's an update to the question, and please see my original updated fiddle.
When you execute the slide effect in jQuery UI, see the bottom example on my fiddle, the box is moved up, and is somewhere placed behind an invisible screen (tough to explain).
With the animate function, see the top example in my fiddle, the area is shrinked, and that's something which I want to avoid. I want to achieve the effect such as 'Slide' does, but the content under the box must move up immediately with the animation, and not after the animation has been completed.
Edit: Reworked the correct answer in a plugin.
Thanks to the answers I've received here, I found the correct code, modified a bit, and created a plugin from it which I'll place here.
The plugin is called 'Curtain' and can be described as rising the requested element as a curtain and thus move it out of the way.
Here's the source code:
(function($) {
$.fn.curtain = function(options, callback) {
var settings = $.extend( {}, $.fn.curtain.defaults, options);
var tabContentsHeight = $(this).height();
$(this).animate({height:0}, settings.duration);
$(this).children().animate({'margin-top':'-' + tabContentsHeight + 'px'}, settings.duration, function() {
$(this).css({"margin-top":0});
if ($.isFunction(callback)) {
callback(this);
}
});
return this; // Allows chaining.
};
$.fn.curtain.defaults = {
duration: 250
};
}(jQuery));
The plugin can be called like this:
element.curtain({ duration: 250 }, function() {
// Callback function goes here.
});
If someone has remarks or a better way to solve this problem, please share it in the comments.
You can do it by using the animate function like this:
$('#square').on('mousedown', function(e) {
$(this).animate({height:-200},2500);
});
Demo
Updated code to create a "curtain raising" like animation:-
$('#square').on('mousedown', function(e) {
$(this).animate({height:-200},2500);
$(this).children().animate({"margin-top":"-400px"},2500, function() {
$(this).css({"margin-top":0})
});
});
CSS:
`#square{
overflow:hidden;
}`
Demo 2
This is the effect you wanted?
$('#square').on('click', function(e) {
$(this).animate({height :0},2500 );
});

jQuery callback freezing up

I made a little fiddle to illustrate the problem.
Basiaclly this works:
var visible = $('#container').find(' > div:visible'),
hidden = $('#container').find(' > div:hidden');
visible.fadeOut(1000, function() {
});
setTimeout(function() { hidden.fadeIn('slow') },1000);
and this doesn't:
var visible = $('#container').find(' > div:visible'),
hidden = $('#container').find(' > div:hidden');
visible.fadeOut(1000, function() {
hidden.fadeIn(100)
});
The second way makes the page freeze up.
Is there something wrong with the way I'm using the callback?
I need to be able to put it in an animation queue, because I need to be able to stop() everything.
Is there any way to make this work? I's broken on Chrome and FF
The problem in your 2nd solution is, that an animation will be started for each visible div and for each animation (which has finished) all hidden divs start the fade in animation.
Uhh, first of all, why are you using such construction:
$('#container').find(' > div:visible');
Just use:
$('#container > div:visible');
Second, don't use #container because for some reason if fires fadeOut for 301 elements inside which is just too much.
Scratch that, i see jsfiddle has been changed and now it's only one element in there. Not surprised that it crashed before - too many objects.
Third, after fadeOut nothing fades in because at the point when you assign hidden variable there is no hidden divs. You'll have to use this in your callback:
$('#container2 > div:hidden').fadeIn(1000)

jQuery: Timeout/Delay with a notification function?

I wrote the following simple function that takes two parameters mostly coming from another function returned with json from the server.
var timing = 10000;
function notificationOutput(type, message) {
console.log('output now!');
var note = $('.notification');
note.css('display', 'none');
if ( type == "success" ) { note.removeClass('warning').addClass('success'); }
if ( type == "warning" ) { note.removeClass('success').addClass('warning'); }
note.find('.message').html(message);
note.slideDown( function() {
note.delay(timing).slideUp();
});
}
All it does is simply sliding down a bar from the top of my page putting out a message (either success or warning). The timing variable is for the notification-bar to stay for 10 seconds. So when the function is triggered I want the bar to slideDown(), hold that position for 10seconds and than slideUp() again.
However right now when the function is triggered there is a weird timeout happening till the notification bar appears. That means when the function is fired the console.log() output I have in there right now is logged immediately in my JS-console but the slideDown() takes a few seconds longer to appear! Why is that?
I want the slideDown() to happen immediately (at the same time as the output now is logged in the console). Why is there a delay happening?
Thanks for your help!
Nothing obvious there. I would try trimming the code down until it slides down as expected. Remove the callback, remove the html-set, remove the success/warning class-setters, select the note-element before outputting to the console, replace the slide with an immediate show, etc.
Also try calling .stop(true,true) on the note first: note.stop(true,true).slideDown();. This is in case it is busy with some other animation and the slide down is being queued.
Try this
note.slideDown().delay(timing).slideUp();
i think that the problem might be in the easing function used by the slideDown which is swing by default (which is logaritmic). try using linear and maybe try using a faster slidedown time
note.slideDown(400, 'linear').delay(timing).slideUp(400, 'linear');
You are not passing a value for duration to slideDown. Try:
note.slideDown(1000, function() {
note.delay(timing).slideUp();
});

Categories