0

im trying to do the following and hope someone can help me out with this? I need the following;

  1. user clicks an image (lets say #image1)
  1. two functions are triggered, the first is a div (#div2) with an image in it fades up from the original click (about 50px ...So it looks like its coming out of the image), the Second is another div (#div3) with text in it, slides from beneath #div2 and extends about 500px.

if you click the #image1 div again it will reverse the steps and go back to the beginning sequence.

oh jeez i hope that makes sense? i've checked [a link] http://jquery.com/ and i just can tfigure this out, ideally if someone can post an example on jsfiddle i would greatly appreciate it.

user1106295
  • 95
  • 2
  • 9
  • 2
    what have you tried so far? It doesn't matter how wrong it is, it is nice for us to see what someone has tried so we can help them out. Secondly, have you tried writing pseudo code for what it is you are trying to do? If so please post it here. – Jon Taylor Oct 17 '12 at 14:39
  • Have you had a look at [.toggle()](http://api.jquery.com/toggle/), [.slideToggle()](http://api.jquery.com/slideToggle/) or [.fadeToggle()](http://api.jquery.com/fadeToggle/) ? – Adam Tomat Oct 17 '12 at 14:49

1 Answers1

0

Easiest way to do this is with a variable acting as a flag. You'll do stuff like this all the time in UI event scripting. You just include some logic in your click function to test whether or not the animation has been run.

var animRun = false

$('#image').click(function(){
    if (animRun == false){
        //Animation has not run yet, animate it
        $('#div2').animate({
            opacity:1
        },500, function(){
            $('#div3').animate({
                left:'128px'
            },500, function(){
                //Your animation is complete so you set the flag to true
                animRun = true;
            })
        })
    }else{
        //Your flag is set to true so that must mean the animate has been run
        //Reverse the animation, making sure to set the flag back to false  
    }
})

So what you see here with the animation functions are what are called callbacks. They are fired when the animation is complete. So first the image fades in, then the text slides to 128 from whatever it's current position is, then the flag is set to 'true'. So now, using the logic, you can reverse the animation knowing that it has been run. You might also want to disable the click event from being triggered while the animation is running as well. You can use another flag or something like preventDefault().

This should be enough to get ya started.

Throttlehead
  • 1,927
  • 6
  • 22
  • 36
  • As was said above jQuery does provide toggle functions, but I felt it should be important to learn what a toggle is and for you to gain some understanding of what callbacks are and some basic logic here. – Throttlehead Oct 17 '12 at 16:01