jquery fading in and out.

Question

Hi guys just doing some work with jquery and just got a question. I got an image inside a div and was wondering if with jquery i can make that image pop up on the screen by giving it an x and y coordinate. Then using this code i can make it move right

$('#red').pan({fps: 30, 
speed: 0.5, dir: 'right'});

And then make it fade out when it gets to a certain position on the screen. Any help on this matter would be great as iam not to great with jquery atm.

Answer 1

I would try something like this

function MoveAndFade(x, y)
{
    $('.box').fadeIn('slow', function ()
    {
        $(this).animate({ left: x, top: y }, 'slow', 'swing', function ()
        {
            $(this).fadeOut();
        });
    })    
}

Basically it will fade-in the div, then move it to the position you specify, then fade-out. This will happen sequentially.

You will want to change the selector $('.box') to the appropriate selector for your div. The current one selects the element with the class 'box'. You can then pass in any x or y value like: MoveAndFade(50,100);. You will also need to make sure the div has position:absolute css attribute.

You need to call the function MoveAndFade passing in the parameters that you want e.g.

<input type="button" value="Click me" onclick='MoveAndFade(150,50);' />

Or if you want to run when the DOM has loaded do something like:

$(document).ready(function(){
    $('.box').fadeIn('slow', function ()
    {
        $(this).animate({ left: '150', top: '50' }, 'slow', 'swing', function ()
        {
            $(this).fadeOut();
        });
    })    
});

or

$(document).ready(function(){
    MoveAndFade(150,50);
});

where MoveAndFade() is defined inside the $(document).ready(function(){}) section.

Answer 2

You can try someting like this:-

  $('#A').fadeOut( function() {
         $('#B').fadeIn();
       });

callback function can be taken by fadeout that runs after the first effect is completed