JQuery Slider with Sliding Panes and Opacity Changes

I designed a Jquery Slider with “panes” that transition in size and opacity. I liked this idea as an alternative to some sliders that “slide” pane to pane, or ones that have funny transitions between each pane.

This could be used more for a navigation menu or perhaps just a small information block for a few items.

So, now that you’ve seen what’s in store, let’s go over how to make it!

The essentials

You need to include a few files in the header to make sure your JQuery works. Call to them this way :

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.effects.core.js"></script>

You can find those files here.

You also need to call to a .js file that we are going to create. I called mine “toggleeffect.js”, so call yours as well :

<script type="text/javascript" src="js/toggleeffect.js"></script>

The HTML

Now we begin laying the foundation for our slider :

<div class="slidecontainer">

	<div class="slide" id="one">

			

	<div class="backblock" id="blockone">

		Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br /><br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br /><br />It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

	</div>

	<div class="fronttitle" id="titleone" >

	<img src="images/slide_pic1.png" class="sliderpic" alt="" />

	Home

	</div>

	</div>

	<div class="slide" id="two">

	<div class="backblock" id="blocktwo">

		Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br /><br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br /><br />It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

	</div>

	<div class="fronttitle" id="titletwo" >

		<img src="images/slide_pic2.png" class="sliderpic" alt="" />

		About

	</div>

	</div>

	<div class="slide" id="three">

	<div class="backblock" id="blockthree">

	        Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br /><br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br /><br />It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

	</div>

	<div class="fronttitle" id="titlethree" >

		<img src="images/slide_pic3.png" class="sliderpic" alt="" />

		Services

	</div>

	</div>

	<div class="slide" id="four">

	<div class="backblock" id="blockfour">

	        Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br /><br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br /><br />It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

	</div>

	<div class="fronttitle" id="titlefour" >

		<img src="images/slide_pic4.png" class="sliderpic" alt="" />

		Contact

	</div>

	</div>

	<div class="slide" id="five">

	<div class="backblock" id="blockfive">

		Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br /><br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br /><br />It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

	</div>

	<div class="fronttitle" id="titlefive" >

		<img src="images/slide_pic5.png" class="sliderpic" alt="" />

		Blog

	</div>

	</div>

		

        </div>

The important things to remember are that ‘front title’ is the section that displays when NOT hovered, and that ‘backblock’ is the section that displays when the div tag is enlarged.

The CSS

Next, we’ll need to apply the following properties to our stylesheet. Let’s check the markup :

body { 

		margin:0px; padding:0px;

		font-family:'Gill Sans', 'Gill Sans MT', 'Gill Sans Std', GillSans, Calibri, Tahoma, sans-serif;

		font-weight:100;

		line-height:19px;

		font-size:16px;

		background: #b5b5b5;

	}



.cleared { 

		float: none;

		clear: both;

		margin: 0;

		padding: 0;

		border: none;

		font-size:1px;



	}	

	



	

	

.container {

		position:relative;

		margin:0px auto;

		padding:50px 0px 0px 0px;

		height:auto;

		width:900px;

}



.slidecontainer {

		position:relative;

		margin:50px 0px;

		padding:0px;

		width:900px;

		height:300px;

		background:#eee;

		border-top:1px #aaa solid;

		border-bottom:1px #aaa solid;

		overflow:hidden;

}



.slide {

		float:left;

		position:relative;

		margin:0px;

		padding:0px;

		width:180px;

		height:300px;

		overflow:hidden;

		

}



#one { background:#eee /*357EC7; /*url('images/lightsgradient.png') center center no-repeat; */}

#two { background:#eee /*571B7e; /*url('images/lightsgradient.png') center center no-repeat; */ }

#three { background:#eee /*7E2217; /*url('images/lightsgradient.png') center center no-repeat;*/ }

#four { background:#eee /*FDD017; /* url('images/lightsgradient.png') center center no-repeat;*/ }

#five { background:#eee /*347235;  /* url('images/lightsgradient.png') center center no-repeat;*/ }



.fronttitle {

		position:relative;

		margin:0px;

		padding:70px 20px 0px 20px;

		height:230px;

		width:140px;

		text-align:center;

		overflow:hidden;

		font-family:Arial Black;

		font-weight:500;

		color:#000;

		font-size:24px;

}



.sliderpic {

		clear:both;

		margin:10px 0px;

		padding:0px;

		border:0px;

		height:100px;

		width:100px;

		

}



.backblock {

		position:absolute;

		margin:0px;

		padding:20px 20px 20px 200px;

		height:260px;

		width:480px;

		overflow:hidden;

		opacity:0.0;

}

Now you’ll note that each slide has an individual class as well. I used this to apply individual background colors to each slide, but it doesn’t apply for this particular demo.

**Please note that although changing the background color does look nice, it also drastically reduces the performance of the JQuery.

The JQuery

Now we can start writing our JQuery. You will place this in the file you created called “toggleeffect.js” or whatever you decided to name yours.

$(function() {



   

$('.slide').hover( 



    function () {

        $this = $(this);

        $siblings = $this.siblings();



        $siblings.stop().animate({width: 50,  }, 1000);

        $('.fronttitle', $siblings).stop().animate({opacity:0.0}, 500);

        $('.backblock', $this).stop().animate({opacity:1.0}, 1500);

        $this.stop().animate({width:700, }, 1000);



    },

    function () {

        $this = $(this);

        $siblings = $this.siblings();



        $siblings.stop().stop().animate({width: 180, opacity:1.0 }, 1000);

        $('.fronttitle', $siblings).stop().animate({opacity:1.0}, 1000);

        $('.backblock', $this).stop().animate({opacity:0.0}, 500);

        $this.stop().animate({width: 180 }, 1000);

    }   

);

The JQuery is basically saying, whenever ‘slide’ is hovered, perform the following functions :

1. Change the non-hovered slides’ widths to 50 pixels.
2. Fade out the opacity of their divs.
3. Fade in the hovered div’s ‘backblock’ div tag.
4. Widen the hovered div to 700 pixels.

Then, when not hovered, perform the reverse animations.

Here’s a few things you can edit :

1. The number at the end of each statement is the duration of time it takes to complete each animation, so 1000 = 1000 milliseconds = 1 second. You can adjust this as you see fit.

2. The opacity can be changes as well. You can even include additional css properties along with Opacity, like width, height, backgroundcolor, etc. You can find more here.

The finish

That’s about it! Feel free to mess around with different CSS properties, images, etc. This is all open-source.

• animate divs
• animation with jquery
• div animation
• jquery
• jquery div animation
• jquery opacity
• jquery slider
• jquery slider alternative
• jquery slider sliding panels
• jquery sliding panels
• jquery tutorial
• opacity animation
• open source jquery
• panel sliding jquery
• sliding panels
• sliding panes