JQuery: FadeOut-FadeIn


body{
font-family:Arial,sans-serif;
margin: 0px;
padding:0;
}
.container {
height: 400px;
width: 100%;
float: left;
clear: both;

}

.right {

float: right;

}

.left {
/*behavior: url(pie/PIE.htc);*/
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 0;
-moz-border-radius: 5px;
-moz-border-top-right-radius: 0;
border-radius: 5px;
border-top-right-radius: 0;
border: 6px solid orange;
height: 400px;
overflow: auto;
padding: 1em;
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}

.tabItems{
height: 2.5em;
vertical-align: middle;
display:table-cell;
vertical-align:bottom;
/* background-color: #6699FF; */
float: left;
width: 9em;
cursor: pointer;
}
.tabItems:hover{
color: white;
height: 2.5em;
vertical-align: middle;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #FF8300;

}

#mymenu{
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-top-right-radius: 5px;
-moz-border-bottom-right-radius : 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-right: 6px solid orange;
border-top: 6px solid orange;
border-bottom: 6px solid orange;
border-top-left-radius: 0;
width: 9em; float: left; margin: 0;
}

.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

#menu{
display: table;

height:2.5em;

text-align: center;
clear:both;

margin: 0;
padding:0;

background-color: #FFDBB5;

width: 100%;float: none;
/*border: 1px solid green;*/
}
#content1{
/* Firefox */
height: 400px;
display: block;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-bottom-right-radius : 15px;
-moz-border-bottom-left-radius : 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
border: 5px solid #FF8300;
box-sizing:border-box;
margin: 0;
padding:0;
position: relative;

}

$().ready(function(){
$(“#menu > dd”).hide();
$(“#menu > dt”).addClass(“tabItems”);

$(“.tabItems”).on(“click”, function(){
var tab = $(this);
var cont = $(“#content”);
cont.fadeOut(“fast”,function() {
cont.html($(tab).next().html());
cont.fadeIn(“slow”);
});
});
})

This is a test

<!–

–>

MJ

section 1

Property Values

Value Description Play it
none The element will not be displayed at all Play it »
box (or flex-box) The element is displayed as a block-level flex container box  
block The element is displayed as a block-level element (like paragraphs and headers) Play it »
flex The element is displayed as a block-level flex container box  
inline This is default. The element is displayed as an inline-level element
(like span)
Play it »
inline-block The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
inline-flex The element is displayed as an inline-level flex container box  
inline-table The element is displayed as an inline-level table  
list-item The element is displayed as a list-item, which means that it has a bullet in front of it Play it »
table The element is displayed as a table
table-caption The element is displayed as a table caption
table-cell The element is displayed as a table cell
table-column The element is displayed as a table column
table-column-group The element is displayed as a table column group (like <colgroup>)
table-footer-group The element is displayed as a table footer row group
table-header-group The element is displayed as a table header row group
table-row The element is displayed as a table row
table-row-group The element is displayed as a table row group
inherit The value of the display property will be inherited from the parent element


test123
section 2
Johri, Mayank 10:48 PM
section 3
this is section three
section 4
this is section four
left content flexible width

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s