SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smoothly animate elements to fill in empty spaces left by faded out elements.

    What a long title, but it's as specific as I could think of.

    Here's why I have right now: http://rosstran.net/test/v0.11/

    As you can see, when you select a filter option the appropriate images fade out using fadeOut(). However once the fade out animation finishes, the remaining visible images sort of just jump to their new positions. Instead of having this, I want it so they animate and slide into position, similar to how it's done here: http://www.newmediacampaigns.com/portfolio

    I tried using CSS3 transitions, but failed since I really have no experience with them. If there's a solution to using CSS3 transitions to solve this problem, let me know!

    Besides that, I tried playing around with different animations instead of the fadeOut() function, such as using animate to "tween" the width and height to 0 which did take away the whole jumping problem, but the animation of the images shrinking to the top didn't look very cool. If I could get the visible elements to smoothly animate to their new positions along with a fade out or shrink-to-the-center-of-the-image or really anything that looks cool for the removed images, that would be awesome.

    I tried some extensive googling, but really couldn't find a good solution. The solutions I found were too specific to their cases and didn't really seem relevant to mine. I'm really stuck now so any help or comments would be greatly appreciated!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Isaac Lean View Post
    I tried some extensive googling, but really couldn't find a good solution. The solutions I found were too specific to their cases and didn't really seem relevant to mine. I'm really stuck now so any help or comments would be greatly appreciated!
    Yes, that's some impressive animating there.

    It would require creating some custom scripting, to pleasingly show and hide the relevant ones, then to custom animate the remaining images to the positions that they are supposed to be at.

    We can help you with the bits and pieces that are likely to be needed to be done to achieve that sort of end-result, but I doubt that you will be lucky enough to find anyone here who will create a perfect solution for you. Not unless they are wanting to exercise their programming muscles to attempt to create an as-good solution.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •