CODEWITHSUNDEEP
jqueryhtmlcss
user3013995
user3013995

Reputation: 3

Jquery, smooth transition slide after floated elements disappear

I'm still somewhat new to jquery, which you'll likely notice.

Check out my jsfiddle

Here's the jquery code, though I think you'll need to see the example for this to be clear:

$(document).ready(function(){

                $('body').click(function(event) {
                    if($(event.target).is('.pageOne')) {
                        $('.pageTwo, .pageThree, .pageFour').fadeOut();
                                                    }

                    else if ($(event.target).is('.pageTwo')) {
                        $('.pageOne, .pageThree, .pageFour').fadeOut();
                        }

                    else if ($(event.target).is('.pageThree')) {
                        $('.pageFour, .pageTwo, .pageOne').fadeOut(); }

                    else if ($(event.target).is('.pageFour')) {
                        $('.pageThree, .pageTwo, .pageOne').fadeOut(); }
                });



            }); // end ready

This is just a prototype which I might later translate into something useful. Basically what I'm trying to do is, when you click on one of the coloured articles, the rest disappear (which works), but then you'll notice that the item that was clicked kind of jumps to the left, since it is floated to the left.

What I want is for that clicked article to smoothly slide towards the left somehow.

Any ideas on how to achieve this?

Thanks in advance!

Upvotes: 0

Views: 151

Answers (1)

DaniP
DaniP

Reputation: 38252

Maybe you can replace fadeOut() with the animate() method like this:

$('.pageTwo, .pageThree, .pageFour').animate({'width':'0','opacity':'0'});

Check the demo http://jsfiddle.net/QLcCT/6/

Upvotes: 1

Related Questions