How to add animation on open of a Jquery SimpleModal? - javascript

The animation-enabled example in the SimpleModal site has this animation:
1. Fade in the overlay
2. Slide down the modal div
This is the code:
$("#the-div").modal({
onOpen: function (dialog) {
dialog.overlay.fadeIn('fast', function () {
dialog.data.hide();
dialog.container.show('fast', function () {
dialog.data.slideDown('fast');
});
});
}});
I want this animation instead:
1. Just display the modal
2. Fade in the overlay
Alas, simply removing the 2nd parameter of dialog.overlay.fadeIn() from the code above doesn't work. I also tried removing the parameters of dialog.container.show(), also changing it to dialog.container.open(). I've tried other combinations of the code, to no avail.
How do I achieve the animation that I wish?

You can do it like this:
$("#the-div").modal({
onOpen: function (dialog) {
dialog.data.show();
dialog.container.show();
dialog.overlay.fadeIn('fast');
}
});
Since you just want to display it, remove the callbacks altogether and just show the modal and kick off a .fadeIn() on the overlay at the same time :)

Related

fadeIn effect for HTML files using jQuery on click

I'm having trouble trying to add a fade effect when I click onto a link. It links to another HTML file that I have for this project. Is it possible to fade in window.location using fadeIn()?
Here's my code:
$("button1").on("click", function() {
window.location.replace("index2.html");
});
$(".button2").on("click", function () {
window.location.replace("index3.html");
});
$(".button3").on("click", function () {
window.location.replace("index1.html");
});
You could try like this:
$("button1").on("click", function() {
$("body").fadeOut(1000,function(){
window.location.href = "index2.html"
})
});
Number 1000 represents the number of milliseconds that you want the fade out effect to last
And, add this to the page you're loading to get the fade in effect when the document is ready (for example in index2.html:
$(function(){
$("body").hide();
$("body").fadeIn(1000);
})

How can I close my accordion in a normal slideUp behavior ?

I have an accordion.
If I click on View Report - it will expand like this
If I click Hide Details - it will be back to original state.
JS
$saReport.click(function() {
console.log('R');
$saReport.addClass('hidden'); //hide
$saHide.removeClass('hidden'); //show
});
$saHide.click(function() {
console.log('H');
$saHide.addClass('hidden');
$saReport.removeClass('hidden');
$('.panel-collapse').removeClass('in');
});
Result
My accordion is closing very quick, like flashing hide.
How can I close my accordion in a normal slideUp behavior ?
Any hints / helps / suggestions on that will be much appreciated.
It would be usefull if you could post some relevant html.
If you you desire a simple slide behaviour you could either use the bootstrap accordion which is quite well documented.
If you want to implement it yourself, you could simply use the jquery slideUp() and slideDown() methods, i.e.:
$saReport.click(function() {
console.log('R');
$saReport.addClass('hidden'); //hide
$saHide.removeClass('hidden'); //show
// slide down your report (show)
$('.your-report-container').slideDown(400);
});
$saHide.click(function() {
console.log('H');
$saHide.addClass('hidden');
$saReport.removeClass('hidden');
$('.panel-collapse').removeClass('in');
// slide up your report (hide)
$('.your-report-container').slideUp(400);
});
These slide methods allow you to pass a parameter, which is the time in ms for the animation. The default is 400.

js submenu effect appearance

I'm trying to replace the fade in effect of this submenu with an instant appear effect (0sec delay).
the magic happens in this section of the assets/js/app.min.js file, and I suppose that I have to modify the dropdown.fadeIn() function, but I have no idea how:
that.hoverIntent(function() {
that.addClass("sfHover"), dropdown.fadeIn(), $(this).find(">a").addClass("active");
}, function() {
that.removeClass("sfHover"), dropdown.hide(), $(this).find(">a").removeClass("active");
}), children.hoverIntent(function() {
that.addClass("sfHover"), $(this).find(">.sub-menu").fadeIn(), $(this).find(">a").addClass("active");
}, function() {
that.removeClass("sfHover"), $(this).find(">.sub-menu").hide(), $(this).find(">a").removeClass("active");
});
live preview here.
Any thoughts? tks.
There are two options
Replace the fadeIn() with show(0) so that their will be not delay or transition or animation at all.
If you want to keep fadeIn() for reusability purpose set it to fadeIn(0).

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 );
});

Changing the order of events in Jquery

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

Categories