2

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.

2 Answers 2

1

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

9
  • Sorry but after further investigation. It isn't really, what I needed. Because the bottom dissapears until it reaches the top. I want to object to move out. So grab the bottom and move it up, until it reaches the top. The same as what the slide effect does.
    – Complexity
    Commented Dec 2, 2014 at 12:44
  • Got it. You want animation from bottom to top. I'll update my code by making the changes. Commented Dec 2, 2014 at 12:58
  • Could you check my updated question and fiddle, that should make it more clear.
    – Complexity
    Commented Dec 2, 2014 at 13:14
  • Almost, but you still see a difference between the jQuery UI slide method and your implementation. I don't want to be rude, it's great what you do, but I try to remake a Windows Application for the Web and the animations must be exactely the same. Have you an idea on how to update your code so that it's working exactely the same as jQuery UI slide function? Thanks in advance.
    – Complexity
    Commented Dec 2, 2014 at 14:06
  • Hey check this fiddle. By changing the value of decrease in "margin-top" to get something similar like slide-up. To incorporate the delay between the line of the function I have increased the speed of margin-top change. Otherwise I think by CSS3 transitions we can get exactly something like jQuery UI Slide. Commented Dec 2, 2014 at 14:38
0

This is the effect you wanted?

$('#square').on('click', function(e) {
     $(this).animate({height :0},2500 );
});
4
  • Sorry but after further investigation. It isn't really, what I needed. Because the bottom dissapears until it reaches the top. I want to object to move out. So grab the bottom and move it up, until it reaches the top. The same as what the slide effect does.
    – Complexity
    Commented Dec 2, 2014 at 12:53
  • Sry, still not sure what exactly you want.
    – Cerlin
    Commented Dec 2, 2014 at 12:57
  • 1
    @Complexity can you to edit your question to clear up this confusion, I'm not sure what you mean by "I want to object to move out". Thanks Commented Dec 2, 2014 at 12:57
  • Could you check my updated question and fiddle, that should make it more clear.
    – Complexity
    Commented Dec 2, 2014 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.