jQuery: Animated header plugin

Posted by Fverswijver on Stack Overflow See other posts from Stack Overflow or by Fverswijver
Published on 2010-05-13T16:00:45Z Indexed on 2010/05/13 16:34 UTC
Read the original article Hit count: 308

Filed under:

jQuery

|

animate

|

image

|

slide

|

jquery-plugins

I'm looking for a jQuery plugin that can help me with the following:

I have a list of images I want to use for my header but they are pretty big (height especially) and I don't want to resize them to fit my small header div.

What I'd want is a plugin that allows the images to start at the bottom of the div (or rather the top of the image at the top of the div) and move upwards so the entire image can be seen, and once up they are shown entirely (bottom of image at bottom of div) they should "blend" (opacity toggle or something alike) with the next image and thus create a continuous loop with all the images.

I've looked through several plugins but have never found one that can achieve what I'm looking for (maybe I'm asking for a tad too much) but my JS is not sufficient enough to build it myself.

Thanks!

© Stack Overflow or respective owner

Related posts about jQuery

Microsoft and jQuery

as seen on West-Wind - Search for 'West-Wind'
The jQuery JavaScript library has been steadily getting more popular and with recent developments from Microsoft, jQuery is also getting ever more exposure on the ASP.NET platform including now directly from Microsoft. jQuery is a light weight, open source DOM manipulation library for JavaScript that… >>> More
An Introduction to jQuery Templates

as seen on Stephen Walter - Search for 'Stephen Walter'
The goal of this blog entry is to provide you with enough information to start working with jQuery Templates. jQuery Templates enable you to display and manipulate data in the browser. For example, you can use jQuery Templates to format and display a set of database records that you have retrieved… >>> More
Ajax Control Toolkit December 2013 Release

as seen on Stephen Walter - Search for 'Stephen Walter'
Today, we released a new version of the Ajax Control Toolkit that contains several important bug fixes and new features. The new release contains a new Tabs control that has been entirely rewritten in jQuery. You can download the December 2013 release of the Ajax Control Toolkit at http://Ajax.CodePlex… >>> More
jQuery show "loading" during slow operation

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to show a small loading image during a slow operation with jQuery and can't get it right. It's a BIG table with thousands of rows. When I check the "mostrarArticulosDeReferencia" checkbox it removes the "hidden" class from these rows. This operation takes a couple of seconds and I want… >>> More
Tracking download of non-html (like pdf) downloads with jQuery and Google Analytics

as seen on Developer IT - Search for 'Developer IT'
Hi folks, it’s been quite calm at Developer IT’s this summer since we were all involved in other projects, but we are slowly comming back. In this post, we will present a simple way of tracking files download with Google Analytics with the help of jQuery. We work for a client that offers… >>> More

Related posts about animate

jQuery animate() - multiple selectors and variables, a unique animate() call

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi guys, I am resizing several divs in a loop with animate() in jQuery. At the same time I am moving (left property, no resizing at all) the div where they are contained. Problem is, despite they have same duration the resize animate calls finish before the move call. They are out of sync. Is there… >>> More
jquery animate browser window

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Is there a way to animate a browser window using jquery. Right now I'm essentially using this: $(window).animate({ left: '+=50' }, 5000}); The reason why it isn't working is probably obvious, although not for me. I eventually need to loop an animate effect so that the browser will move… >>> More
jquery hover not working in safari and chrome

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm developing a site and I am implementing a jquery hover effect on some list items. It works perfectly in all browser except safari and chrome (mac and pc). For some reason the hover effect doesnt work on those to browsers. Here is the link link text I thought I would add the code just in case… >>> More
jQuery simplifying code (beginner)

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm getting to grips with jQuery but find myself repeating code over and over again... Surely there's a simpler way to write this: $('#more-mcr, #more-hilton, #more-lpool').hide(); $('#mcr-hatters').hoverIntent(function() { $('#mcr-hilton').stop().animate({opacity:… >>> More
Animate button on MouseOver and MouseDown

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm making my own ControlTemplate for a standard Button in WPF. I want to change the background of my button when the user hovers over the button with the mouse, but also when the user presses the button (to yet another color). This seems like a common behavior, but I can't get it to work. My template… >>> More