SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How do I animate this? jquery

    I'm a novice at jquery (or maybe just a beginner).

    I have this page - http://aug4th.com/testpage/index_test.html (content has been removed so ignore the broken menu and empty areas)

    I only need help with the portion that says, "Target at scale..." and has floating people.

    Right now on hover, the profile images change along with the background image. I need the profile images to animate in a way where their name remains in place (animators, photographers, etc) and the image quickly fades into the next and fades out when you move away. Right now it's jumpy. I'm not sure how to approach it.

    I tried to animate it and do some things but i really couldn't get right.

    Suggestions?

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hey rpeg,

    The trick here is to, rather than swap the images out like you're currently doing, to have both images on the page and then fade from one to the other.

    I've knocked up a quick demo on JS Fiddle: http://jsfiddle.net/GeekyJohn/Skf6v/

    The basics are:

    HTML Code:
    <div class="pic">
        <img src="http://placehold.it/200x300&text=pic1_on" alt="" class="on" />
        <img src="http://placehold.it/200x300/6699ff/ffffff&text=pic1_off" alt="" class="off" />
    </div>
    Just basic markup - a container that will be relatively positioned, then we absolutely position the images inside of it.

    Code css:
    .pic { /* pic container */
        position: relative;
        float: left;
        margin:30px;
        width:200px;
        height:300px;
    }
     
     
    .pic img  { /* pics are absolutely positioned so their content can overlap exactly */
        position: absolute;
        top:0;
        left:0;
    }
    /* if you need to, you can position the off or on image slightly differently so that things line up better */
     
     
    .pic img.off { /* hide the "off" state by default */
        display: none;
    }


    so, css is pretty basic as well - no need for it to be too complicated

    Code javascript:
    $(document).ready(function(){
        //monitor the mouseenter/leave events
        $(".pic").on("mouseenter mouseleave", function(e){
            //make sure we're showing/hiding the correct els
            var showEl = e.type === "mouseenter" ? ".off" : ".on",
                hideEl = e.type === "mouseenter" ? ".on" : ".off";
     
            // fade in/out the elements, play around with the speeds for different effects
            // sometimes a fast fadeout and slightly slower fadein can look nice for example
            $(this).find(showEl).fadeIn( 500);
            $(this).find(hideEl).fadeOut(500);
        });
    });

    Again, the JavaScript is relatively simple, it's the combination of css/js/markup that makes it all work nicely
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Tags for this Thread

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
  •