Skip to content

Instantly share code, notes, and snippets.

@jalalhejazi

jalalhejazi/jQuery.plugin.flash.html

Last active August 29, 2015 13:56
Show Gist options
  • Save jalalhejazi/9132763 to your computer and use it in GitHub Desktop.
Save jalalhejazi/9132763 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery.plugin: flash() with extend
Raw
jQuery.plugin.flash.html
<!doctype html>
<html>
<head>
<meta charset=utf-8>    
<title>Create Custom Effect</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">    
<style>
p {
margin-top: 0;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<header> jQuery is flexible, Create custom cascading effects with jQuery Return Object </header>
<h1>(Click on me) To Show the next content using jQuery.fn.flash the jQuery way</h1>
<div class=content>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, minus, porro assumenda ullam dolore repudiandae ab molestias! Alias, maxime voluptatem quis omnis optio laborum ipsum dicta iste odio aliquam quo exercitationem officia quos odit fugiat enim fuga eveniet praesentium repudiandae saepe esse iure qui hic explicabo quia cum reprehenderit fugit distinctio labore ducimus adipisci dignissimos et magnam. Numquam, dolorem, a, ea accusamus nemo aperiam at dicta iste voluptates vitae et est architecto incidunt odit laborum sunt consectetur debitis impedit minus modi adipisci explicabo omnis officia odio quibusdam libero repellat veniam quidem doloribus. Delectus, nihil quas quasi sint reiciendis velit natus!     
</p> 
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, mollitia, magni, et, similique modi sit cumque assumenda sapiente voluptatibus voluptates id impedit molestiae reiciendis doloremque a voluptate numquam perferendis consequuntur amet inventore atque optio tenetur unde quasi maiores. Consequatur, suscipit, ipsa tenetur praesentium ex beatae maiores itaque vero natus eum nesciunt nam omnis doloremque dicta quos! Sequi, accusantium, doloremque, corrupti, magni earum eveniet doloribus deserunt illo voluptatum molestias rem est omnis. At, itaque, expedita magni accusantium sunt iure rerum quis laudantium eaque cupiditate magnam accusamus aspernatur nulla! Facere, dignissimos, officia ratione ea ad exercitationem molestiae nam non impedit doloremque maxime possimus quo perspiciatis odit consequatur dolorum laudantium harum voluptatem voluptas in. Quisquam, mollitia, voluptatem, nostrum iste ipsa deserunt voluptatibus aspernatur harum cupiditate rerum temporibus voluptate dicta pariatur repudiandae earum illum atque illo vero officia recusandae. Cum, similique, dicta, dolorem corporis aspernatur atque ratione dolor maxime deserunt voluptatibus dignissimos distinctio impedit.
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>
jQuery.prototype.flash = function(config) {        
var me = $(this);
var options = {
tid1: 1000,
tid2: 1000
};
options = $.extend(options, config);
        
return me.slideDown(options.tid1, function() {                    
me
.delay(options.tid2)
.slideUp(options.tid1);                
});
    
};
    
var content = $('div.content').hide();     
$('h1').on('click', function() {        
content
.flash({tid1:5000 , tid2:5000 , effect:'cool'});     
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment