3

I use jQuery animate all the time, but it is failing for some reason this time. It will work it I try to target '$(this).animate' after the closeBtn click, and it will work, kinda.

here is a portion of my html(the relivant parts, and yes I have called the jQuery library)

<div id='lightBox' style="opacity:0;">
    <div id='closeBtn'>
    </div>
    <div id='lightBoxContent'>
    </div><!--lightBoxContent-->
</div><!--lightBox--> 

here is my jquery

$(document).ready(function()
{ 
    $('#quoteBtn').click(function()
    {
        $('#lightBox').animate({
            opacity:'1',
            height:'560px'
        }, 300, function() {
            $('#lightBoxContent').html(output);
        });


        $('#closeBtn').click(function()
        {
            //alert('click');
            $('#lightBox').animate({
                opacity:'0'
            }, 300, function() {
                //alert('first animation complete');
                $('#lightBox').animate({
                    height:'0px'
                }, 300, function() {
                    //alert('second animation complete');
                });
            });
        });
    });
});

and my css(it is not really a requirement for this, but I included it for safe measure

#lightBox {
    width:780px;
    background-color:white;
    position:fixed;
    margin-left:-400px;
    margin-top:-300px;
    left:50%;
    top:50%;
    z-index:9999;
    -webkit-box-shadow:  0px 0px 200px 50px ;
    box-shadow:  0px 0px 200px 50px ;
    padding:20px;
}
3
  • You only used those ID's once, right ?
    – adeneo
    Apr 16, 2013 at 22:14
  • Have you tried console.log("test"); in various steps to see what line your code is breaking down? or have you taken a look at your console to see if there are any errors?
    – ntgCleaner
    Apr 16, 2013 at 22:14
  • 2
    For things like these, you should also create a jsfiddle. Makes our lives easier. Apr 16, 2013 at 22:15

2 Answers 2

4

You want to move $('#closeBtn').click(function() outside of the click() function being called when #quoteBtn is click. Because it will never be called since you can't click inside of a click.

Here is what it should look like:

$(document).ready(function()
{ 
    $('#quoteBtn').click(function()
    {
        $('#lightBox').animate({
            opacity:'1',
            height:'560px'
        }, 300, function() {
            $('#lightBoxContent').html(output);
        });    
    });

    $('#closeBtn').click(function()
    {
        //alert('click');
        $('#lightBox').animate({
            opacity:'0'
        }, 300, function() {
            //alert('first animation complete');
            $('#lightBox').animate({
                height:'0px'
            }, 300, function() {
                //alert('second animation complete');
            });
        });
    });

});

Update: Ok... here is part 2.

You want to set $('#lightBox').animate({ to $('#lightBox').stop().animate({ which will then continue the "close" animation.

5
  • I can't believe I over looked that! But it's still not working.
    – Matt Ryan
    Apr 16, 2013 at 22:25
  • Ok think I got it. Updated my answer Apr 16, 2013 at 22:33
  • It's an event handler, you don't need to click inside the click, it binds the event on click. Still good point, attaching event handlers inside event handlers is usually not a good idea.
    – adeneo
    Apr 16, 2013 at 22:38
  • That you very much doitlikejustin. I ussually only use .stop() on hover events (.mouseenter(), .mouseover(), etc. The event handler inside the event handler wasn't my issue, that was just a typing error. Thanks for your help. On a side note, is it ever a bad idea to put .stop() on a jquery animation? Will it ever mess up the code? I'm thinking about starting to use it by default.
    – Matt Ryan
    Apr 16, 2013 at 23:12
  • 1
    @MattRyan I can't speak from experience on it being a "bad idea". I almost always use .stop() on any sort of animation, because in the past I have run into many issues without using it. But using it has never really messed up my code. Apr 16, 2013 at 23:21
0

Correct me if I'm wrong, but try changing this:

position: fixed;

to position: absolute; or position: relative;

2
  • position:fixed; makes me a little nervous. I know if you don't set an element to position:relative or position:absolute in the css, jQuery won't animate it. Just not sure for position:fixed. Apr 16, 2013 at 22:18
  • I used fixed because I always want the panel in focus, so users can't scroll away from it, it's a sort of lightbox.I have used this method before, and fixed works with jquery animate.Yes, all IDs are only used once throughout the document.I use alert() for testing purposes.
    – Matt Ryan
    Apr 16, 2013 at 22:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.