jQuery Suggestions?

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

jQuery Suggestions?

Marc Pinnell-3
Hey all,

I'm using the below jQuery to popout an image (enlarge on hover) and show a caption over the top of it. The problem is the caption shows up before the animation finishes on the enlargement. Suggestions on how to avoid this? Put some type of delay on the second half of the script? Fade it in? Any script suggestions appreciated.

                $("ul.bigPoppers li").hover(function() {
                        $(this).css({'z-index' : '10'});
                        $(this).find('img').addClass("hover").stop()
                                .animate({
                                        marginTop: '-155px',
                                        marginLeft: '-208px',
                                        top: '50%',
                                        left: '50%',
                                        width: '375px',
                                        height: '276px',
                                        padding: '20px'
                                }, 200);
                               
                                $(".desc").css("display", "block");
                       
                        }


--
Marc Pinnell
1027 Design
PO Box 990872
Redding, CA 96099-0872
530.941.4706
fax: 866.232.5300
www.1027Design.com




--
This list is a free service of LassoSoft: http://www.LassoSoft.com/
Search the list archives: http://www.ListSearch.com/Lasso/Browse/
Manage your subscription: http://www.ListSearch.com/Lasso/


Reply | Threaded
Open this post in threaded view
|

Re: jQuery Suggestions?

Robert Carpenter
Marc-

Check out the callback function noted at the bottom of the animate()  
docs page:

http://api.jquery.com/animate/

"Callbacks" are run when the main function completes. Basically, this  
should let you do something like this (untested):

                $("ul.bigPoppers li").hover(function() {
                        $(this).css({'z-index' : '10'});
                        $(this).find('img').addClass("hover").stop()
                                .animate({
                                        marginTop: '-155px',
                                        marginLeft: '-208px',
                                        top: '50%',
                                        left: '50%',
                                        width: '375px',
                                        height: '276px',
                                        padding: '20px'
                                }, 200, function() {
                                $(".desc").css("display", "block");
                        });
                        }

Note that we've moved your .css() assignment into an anonymous  
function to be run after the animation completes.

Hope that helps!
-Robert-

On Mar 9, 2010, at 7:38 PM, Marc Pinnell wrote:

> Hey all,
>
> I'm using the below jQuery to popout an image (enlarge on hover) and  
> show a caption over the top of it. The problem is the caption shows  
> up before the animation finishes on the enlargement. Suggestions on  
> how to avoid this? Put some type of delay on the second half of the  
> script? Fade it in? Any script suggestions appreciated.
>
> $("ul.bigPoppers li").hover(function() {
> $(this).css({'z-index' : '10'});
> $(this).find('img').addClass("hover").stop()
> .animate({
> marginTop: '-155px',
> marginLeft: '-208px',
> top: '50%',
> left: '50%',
> width: '375px',
> height: '276px',
> padding: '20px'
> }, 200);
>
> $(".desc").css("display", "block");
>
> }
>
>
> --
> Marc Pinnell
> 1027 Design
> PO Box 990872
> Redding, CA 96099-0872
> 530.941.4706
> fax: 866.232.5300
> www.1027Design.com
>
>
>
>
> --
> This list is a free service of LassoSoft: http://www.LassoSoft.com/
> Search the list archives: http://www.ListSearch.com/Lasso/Browse/
> Manage your subscription: http://www.ListSearch.com/Lasso/
>
>


--
This list is a free service of LassoSoft: http://www.LassoSoft.com/
Search the list archives: http://www.ListSearch.com/Lasso/Browse/
Manage your subscription: http://www.ListSearch.com/Lasso/


Reply | Threaded
Open this post in threaded view
|

Re: jQuery Suggestions?

Tim Taplin
In reply to this post by Marc Pinnell-3
not overly familiar with the jquery animation functions but most of these functions have a callback which you could use to trigger the caption display after the animation is complete.

otherwise display the caption with a function that has a builtin delay as you've suggested.
scriptaculous has a sync mode where you can apply the same animation to multiple items in sync, perhaps there's an equivalent jQuery function.

Tim Taplin

On Mar 9, 2010, at 8:38 PM, Marc Pinnell wrote:

> Hey all,
>
> I'm using the below jQuery to popout an image (enlarge on hover) and show a caption over the top of it. The problem is the caption shows up before the animation finishes on the enlargement. Suggestions on how to avoid this? Put some type of delay on the second half of the script? Fade it in? Any script suggestions appreciated.
>
> $("ul.bigPoppers li").hover(function() {
> $(this).css({'z-index' : '10'});
> $(this).find('img').addClass("hover").stop()
> .animate({
> marginTop: '-155px',
> marginLeft: '-208px',
> top: '50%',
> left: '50%',
> width: '375px',
> height: '276px',
> padding: '20px'
> }, 200);
>
> $(".desc").css("display", "block");
>
> }
>
>
> --
> Marc Pinnell
> 1027 Design
> PO Box 990872
> Redding, CA 96099-0872
> 530.941.4706
> fax: 866.232.5300
> www.1027Design.com
>
>
>
>
> --
> This list is a free service of LassoSoft: http://www.LassoSoft.com/
> Search the list archives: http://www.ListSearch.com/Lasso/Browse/
> Manage your subscription: http://www.ListSearch.com/Lasso/
>
>


--
This list is a free service of LassoSoft: http://www.LassoSoft.com/
Search the list archives: http://www.ListSearch.com/Lasso/Browse/
Manage your subscription: http://www.ListSearch.com/Lasso/


Reply | Threaded
Open this post in threaded view
|

Re: jQuery Suggestions?

Trevor Borgmeier
In reply to this post by Marc Pinnell-3


on 3/9/10 9:38 PM Marc Pinnell wrote:

> Hey all,
>
> I'm using the below jQuery to popout an image (enlarge on hover) and show a caption over the top of it. The problem is the caption shows up before the animation finishes on the enlargement. Suggestions on how to avoid this? Put some type of delay on the second half of the script? Fade it in? Any script suggestions appreciated.
>
> $("ul.bigPoppers li").hover(function() {
> $(this).css({'z-index' : '10'});
> $(this).find('img').addClass("hover").stop()
> .animate({
> marginTop: '-155px',
> marginLeft: '-208px',
> top: '50%',
> left: '50%',
> width: '375px',
> height: '276px',
> padding: '20px'
> }, 200);
>
> $(".desc").css("display", "block");
>
> }
>
>
>  
Try this:

$("ul.bigPoppers li").hover(function() {
        $(this).css({'z-index' : '10'});
        $(this).find('img').addClass("hover").stop().animate({
            marginTop: '-155px',
            marginLeft: '-208px',
            top: '50%',
            left: '50%',
            width: '375px',
            height: '276px',
            padding: '20px'
        }, 200, function(){
            $(".desc").css("display", "block");
    });
});

-Trevor

--
This list is a free service of LassoSoft: http://www.LassoSoft.com/
Search the list archives: http://www.ListSearch.com/Lasso/Browse/
Manage your subscription: http://www.ListSearch.com/Lasso/


Reply | Threaded
Open this post in threaded view
|

Re: jQuery Suggestions?

Marc Pinnell-3
Sweet! Thanks guys!

Marc


On Mar 9, 2010, at 8:01 PM, Trevor Borgmeier wrote:

>
>
> on 3/9/10 9:38 PM Marc Pinnell wrote:
>> Hey all,
>>
>> I'm using the below jQuery to popout an image (enlarge on hover) and show a caption over the top of it. The problem is the caption shows up before the animation finishes on the enlargement. Suggestions on how to avoid this? Put some type of delay on the second half of the script? Fade it in? Any script suggestions appreciated.
>>
>> $("ul.bigPoppers li").hover(function() {
>> $(this).css({'z-index' : '10'});
>> $(this).find('img').addClass("hover").stop()
>> .animate({
>> marginTop: '-155px', marginLeft: '-208px', top: '50%', left: '50%', width: '375px', height: '276px',
>> padding: '20px'
>> }, 200);
>>
>> $(".desc").css("display", "block");
>>
>> }
>>
>>
>>  
> Try this:
>
> $("ul.bigPoppers li").hover(function() {
>       $(this).css({'z-index' : '10'});
>       $(this).find('img').addClass("hover").stop().animate({
>           marginTop: '-155px',
>           marginLeft: '-208px',
>           top: '50%',
>           left: '50%',
>           width: '375px',
>           height: '276px',
>           padding: '20px'
>       }, 200, function(){
>           $(".desc").css("display", "block");
>   });
> });
>
> -Trevor
>
> --
> This list is a free service of LassoSoft: http://www.LassoSoft.com/
> Search the list archives: http://www.ListSearch.com/Lasso/Browse/
> Manage your subscription: http://www.ListSearch.com/Lasso/
>
>

--
Marc Pinnell
1027 Design
PO Box 990872
Redding, CA 96099-0872
530.941.4706
fax: 866.232.5300
www.1027Design.com




--
This list is a free service of LassoSoft: http://www.LassoSoft.com/
Search the list archives: http://www.ListSearch.com/Lasso/Browse/
Manage your subscription: http://www.ListSearch.com/Lasso/


Reply | Threaded
Open this post in threaded view
|

Re: jQuery Suggestions?

Bil Corry-3
In reply to this post by Marc Pinnell-3
Marc Pinnell wrote on 3/9/2010 7:38 PM:
> I'm using the below jQuery to popout an image (enlarge on hover) and
> show a caption over the top of it. The problem is the caption shows
> up before the animation finishes on the enlargement. Suggestions on
> how to avoid this? Put some type of delay on the second half of the
> script? Fade it in? Any script suggestions appreciated.

Use the callback of animate() to add the caption after the animation has finished:

                $("ul.bigPoppers li").hover(function() {
                        $(this).css({'z-index' : '10'});
                        $(this).find('img').addClass("hover").stop()
                                .animate({
                                        marginTop: '-155px',
                                        marginLeft: '-208px',
                                        top: '50%',
                                        left: '50%',
                                        width: '375px',
                                        height: '276px',
                                        padding: '20px'
                                }, 200, function() {
                                        // Animation complete.
                                        $(".desc").css("display", "block");
                                });
                        }



More here:

        http://api.jquery.com/animate/


- Bil

--
This list is a free service of LassoSoft: http://www.LassoSoft.com/
Search the list archives: http://www.ListSearch.com/Lasso/Browse/
Manage your subscription: http://www.ListSearch.com/Lasso/


Reply | Threaded
Open this post in threaded view
|

Re: jQuery Suggestions?

Robert Carpenter
In reply to this post by Robert Carpenter
> Check out the callback function noted at the bottom of the animate()  
> docs page:
> http://api.jquery.com/animate/

Did I say "bottom"? I think I meant "as far down as I scrolled to find  
out if animate() supplied a callback, which is about 20% of the way  
down the page." Sorry.

:-)

Here, have an link+anchor to take you right there:

http://api.jquery.com/animate/#callback

-Robert-

On Mar 9, 2010, at 7:59 PM, Robert Carpenter wrote:

> Marc-
>
> Check out the callback function noted at the bottom of the animate()  
> docs page:
>
> http://api.jquery.com/animate/
>
> "Callbacks" are run when the main function completes. Basically,  
> this should let you do something like this (untested):
>
> $("ul.bigPoppers li").hover(function() {
> $(this).css({'z-index' : '10'});
> $(this).find('img').addClass("hover").stop()
> .animate({
> marginTop: '-155px',
> marginLeft: '-208px',
> top: '50%',
> left: '50%',
> width: '375px',
> height: '276px',
> padding: '20px'
> }, 200, function() {
> $(".desc").css("display", "block");
> });
> }
>
> Note that we've moved your .css() assignment into an anonymous  
> function to be run after the animation completes.
>
> Hope that helps!
> -Robert-
>
> On Mar 9, 2010, at 7:38 PM, Marc Pinnell wrote:
>
>> Hey all,
>>
>> I'm using the below jQuery to popout an image (enlarge on hover)  
>> and show a caption over the top of it. The problem is the caption  
>> shows up before the animation finishes on the enlargement.  
>> Suggestions on how to avoid this? Put some type of delay on the  
>> second half of the script? Fade it in? Any script suggestions  
>> appreciated.
>>
>> $("ul.bigPoppers li").hover(function() {
>> $(this).css({'z-index' : '10'});
>> $(this).find('img').addClass("hover").stop()
>> .animate({
>> marginTop: '-155px',
>> marginLeft: '-208px',
>> top: '50%',
>> left: '50%',
>> width: '375px',
>> height: '276px',
>> padding: '20px'
>> }, 200);
>>
>> $(".desc").css("display", "block");
>>
>> }
>>
>>
>> --
>> Marc Pinnell
>> 1027 Design
>> PO Box 990872
>> Redding, CA 96099-0872
>> 530.941.4706
>> fax: 866.232.5300
>> www.1027Design.com
>>
>>
>>
>>
>> --
>> This list is a free service of LassoSoft: http://www.LassoSoft.com/
>> Search the list archives: http://www.ListSearch.com/Lasso/Browse/
>> Manage your subscription: http://www.ListSearch.com/Lasso/
>>
>>
>
>
> --
> This list is a free service of LassoSoft: http://www.LassoSoft.com/
> Search the list archives: http://www.ListSearch.com/Lasso/Browse/
> Manage your subscription: http://www.ListSearch.com/Lasso/
>
>


--
This list is a free service of LassoSoft: http://www.LassoSoft.com/
Search the list archives: http://www.ListSearch.com/Lasso/Browse/
Manage your subscription: http://www.ListSearch.com/Lasso/