SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Combining fade and move

    I'm making (or at least I try to) a roll over effect with a fade and moving object, for which I used a simple caption script as a basis. I have it nearly working the way I would like to have but, I'm not realy happy with the moving part. This is what I have
    Code JavaScript:
    	$('div.slide').hover(function(){
    		$(this).children('.caption').stop().fadeTo(500, 0.7);
    		$(this).children('.caption_image').stop().fadeTo(500, 0.7);
    		$(this).children('.caption_image').animate({ marginLeft: "-=15px", }, 200 );
    	},function(){
    		$(this).children('.caption').stop().fadeTo(500, 0);
    		$(this).children('.caption_image').stop().fadeTo(500, 0);
    		$(this).children('.caption_image').animate({ marginLeft: "+=15px", }, 200 );
    	});
    As you can see there are two images, a background(caption) and a overlaying image(caption_image). The fadeTo is working fine, but the moving animation is not going smooth at all. Is there another way of doing this? More that both animations start at the same time instead of one after the other, because that in my opinion is making it not looking smooth!

    Thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I found a way to make things look smoother. First of all by combining the fadeTo and marginLeft animation for the caption_image into one call and secondly by reversing the order for the second part of the function.
    Code JavaScript:
    	$('div.slide').hover(function(){
    		$(this).children('.caption').stop().fadeTo(500, 0.8);
    		$(this).children('.caption_image').animate({ marginLeft: "-=20px", opacity: 1 }, 500);
    	},function(){
    		$(this).children('.caption_image').animate({ marginLeft: "+=20px", opacity: 0 }, 100);
    		$(this).children('.caption').stop().fadeTo(500, 0);
    	});
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


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
  •