switchClass( remove, add, [duration] )
Switches from the class defined in the first argument to the class defined as second argument, using an optional transition.
Some text Some text Some text Some text Some text Some text Some text.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Effects - switchClass Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { position: relative; }
.newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; }
.anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
</style>
<script>
$(function() {
$( "#button" ).click(function(){
$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
$( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );
return false;
});
});
</script>
</head>
<body>
<div class="toggler">
<div id="effect" class="newClass ui-corner-all">
Some text Some text Some text Some text Some text Some text Some text.
</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Effects - switchClass Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { position: relative; }
.newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; }
.anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
</style>
<script>
$(function() {
$( "#button" ).click(function(){
$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
$( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );
return false;
});
});
</script>
</head>
<body>
<div class="toggler">
<div id="effect" class="newClass ui-corner-all">
Some text Some text Some text Some text Some text Some text Some text.
</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</body>
</html>
No comments:
Post a Comment
Do you think it could be useful for you? Share your thoughts with us!