5 animated source code based on jQuery and 5 jquery source code

5 animated source code based on jQuery and 5 jquery source code

1. Vertical sliding accordion Effect Based on jQuery

Today we will share with you a beautiful and flexible vertical jQuery accordion effect. The main idea is to expand click and display more information on the accordion. Other content fragments will become less transparent. When you use a navigation arrow to navigate to the next clip, the new clip slides from the top or bottom.

Online Demo

Source code download

2. Simple hover button Based on css3

Today we will share with you a simple CSS 3-based hover button. This hover button moves the mouse over the front border without interruption. The border interval disappears when the mouse passes.

Online Demo

Source code download

3. waterfall stream Flex

The jQuery plug-in for the animated mesh with asymmetric fluid.

Online Demo

Source code download

4. Use CSS3 to create a set of ultra-fashionable animation buttons

With the new feature of CSS3, we are more likely to create good interactions and effects. In this article, I would like to share some CSS 3 Animation button effects with you. Our idea is to create some animation link elements with different styles. When you hover over the mouse, there will be animation effects and Activity states.

Online Demo

Source code download

5. jquery-based display of Accordion Images

Today I want to share with you the effect of a jquery-based accordion image. The display effect of this image is dimmed before the mouse passes, and the image becomes larger and colored when the mouse passes.

Online Demo

Source code download

The Jquery implementation dialog box pops up every five seconds. How can I add images when writing code in the box?

Let me give you a thought: If the pop-up box must contain images, it must be implemented using the div layer. The control in the script can achieve the pop-up effect, if it is the mode pop-up box, you have to add a div layer under the pop-up div layer to overwrite the entire page.
 
An urgent code that uses jquery to implement automatic image switching, simple and detailed,

I recommend one for you. This is the Code. For more information, see references.

$. Fn. iFadeSlide = function (iSet ){
/*
* Optional iSet parameters:
* ISet. field => image set in the magic light area
* ISet. ico ==> button hook
* ISet. high ==> button highlight Style
* ISet. interval ==> image switching time
* ISet. leaveTime ==> maximum time value of the event to be crossed without triggering the mouse
* ISet. fadeInTime ==> fade in time
* ISet. fadeOutTime ==> fade out time
* Call method $ (document). iFadeSlide ({field: '...', ico :'...',...})
*/
ISet = $. extend ({high: 'high', interval: 3000, leaveTime: 150, fadeOutTime: 400, fadeInTime: 400}, iSet );
Var imgField =$ (iSet. field | '# slide> img ');
Var icoField = $ (iSet. ico | '# ico ');
Var curIndex = 0;
Var slideInterval = iSet. interval | 3000;
Var hoverTime = iSet. leaveTime || 150;
Var fadeOutTime = iSet. fadeOutTime | 400;
Var fadeInTime = iSet. fadeInTime || 400;
Var icos = null, fastHoverFun = null, autoSlideFun = null, hasIcoHighCls = null, changeFun = null, max = null ;;
Var icoHtml = '<ul> ';
Max = imgField. size ();
// Input the corresponding button according to the image
ImgField. each (function (I ){
IcoHtml + = '<li>' + (I + 1) + '</li> ';
});
IcoHtml + = '</ul> ';
IcoField. append (icoHtml );
// Fade-in and fade-out functions
ChangeFun = function (n ){
ImgField. filter (': visible'). fadeOut (fadeOutTime, function (){
ImgField. eq (n). fadeIn (fadeInTime)
Icos. eq (n). addClass (iSet. high). siblings (). removeClass (iSet. high );
});
}
Icos = icoField. find ('ul> li ');
// Initialize highlight for the first key
Icos. first (). addClass (iSet. high );
// Click the button to draw an event
Icos. hov ...... remaining full text>