Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    168
    Thanks
    78
    Thanked 1 Time in 1 Post

    Issue with animation

    Hi guys,

    I have the following code
    Code:
    <div class="testimonial-title">
            <div class="wrapper">
                    <h2 id="testimonial">TESTIMONIALS:</h2>
                    <p id="testimonial-inner">We love the usability and
                            strength of their website</p>
                    <p id="testimonial-name">Council</p>
                    <img id="testimonial-image" src="<?php bloginfo('stylesheet_directory'); ?>/images/home/next.png" width="32" height="36" />
            </div>
    </div>
    The image with the id testimonial-image is hidden. What I was aiming to do was when testimonial-title was hovered, to have testimonial name slide out, and have it placed by testimonial-image. I think I am nearly there, but at the moment it is very jumpy and not very good. The code I came up with was
    Code:
        $(".testimonial-title").mouseover(function() {
            $('#testimonial-name').fadeOut( "fast", function() {
                $('#testimonial-image').toggle("slide").css({'display':'inline-block', 'position':'absolute', 'top':'31px', 'right':'60px'});
            });
        }).mouseout(function() {
            $('#testimonial-name').fadeIn("fast", function() {
                $('#testimonial-image').css({'display':'none'});
            });
        });
    Any advice on how I could improve this would be great.

    Cheers

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    set movable item to <p id="testimonial-name" style="position:absolute;">Council</p> or if it's the other one, do that one.
    Use this to move things DON'T use the div everything is in!
    Code:
    <script>
    $(document).ready(function(){
    	$("#testimonial").mouseenter(function(){
    		$("#testimonial-name").animate({left:'45px'});
    	});
    	$("#testimonial").mouseleave(function(){
    		$("#testimonial-name").animate({left:'0px'});
    	});
    });
    </script>
    Add you display stuff and things should be OK.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    nick2price (12-03-2013)


  •  

    Posting Permissions

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