Click on a picture based on jquery mouse to turn on the switch effect

Based on the jquery mouse click on the picture switch effect is a JQUERY+CSS3 based on the implementation of the click image Switch effects. As follows:

Online preview Source Download

The implemented code.

HTML code:

<Divclass= "Container">        <imgsrc= "Images/1.jpeg"alt= "1" />        <imgsrc= "Images/2.jpeg"alt= "2" />        <imgsrc= "Images/3.jpeg"alt= "3" />        <imgsrc= "Images/4.jpeg"alt= "4" />        <imgsrc= "Images/5.jpeg"alt= "5" />    </Div>    <Divclass= "Name">        <P>No 1</P>    </Div>

JS Code:

$(function () {            varinterval; $(". Container img"). Click (functioncover () {$ ( This). addclass ("Zoom"). FadeOut (700, append); functionAppend () {$ ( This). Removeclass ("Zoom"). AppendTo (". Container"). Show (); varName = $ (". Container"). Children ("IMG"). First (). attr ("Alt"); $(". Name P"). Text ("No" +name); }            })            functionAuto () {varPlay = $ (". Container"). Children ("IMG")). First (); Play.addclass ("Zoom"). FadeOut (700, append); functionAppend () {$ ( This). Removeclass ("Zoom"). AppendTo (". Container"). Show (); varName = $ ( This). Parent (). Children ("IMG"). First (). attr ("Alt"); $(". Name P"). Text ("No" +name); } interval= SetTimeout (auto, 5000); }            $(". Container img"). Hover (function() {stopplay (); }, function() {interval= SetTimeout (auto, 5000); })            functionStopplay () {cleartimeout (interval)} auto (); })

via:http://www.w2bc.com/article/45764

Click on a picture based on jquery mouse to turn on the switch effect