Create Blinking Text Without Using a Plugin

Create Blinking Text Without Using a Plugin


There are tons of jQuery plugins available for any kind of text animation. But the use of jQuery plugin should depend on what are you trying to achieve. One should be very careful while using any jQuery plugin as it comes with some bandwidth. Your website needs to download extra kilo bytes when it's viewed in browser and needs to load lots of plugins. Simple text effect can be easily achieved via plain jQuery code. You don’t need any jQuery plugins. In this post, lets us see how to create blink text effect with plain jQuery code.

jQuery, out of the box provides animation methods like fadeIn and fadeout. We can use these methods to create the blink effect. As blink effect involves fading in and fading out only. So let’s create a function which will create the blink effect.

function blinkText(elm){

$(elm).fadeOut('slow', function(){

$(this).fadeIn('slow', function(){

blinkText(this);

});

});

}

In the code above, first a call is made to the fadeout method, which when completed makes a call to function. And this function calls fadeIn method to fade in the text. And this method calls the blinkText method again to create an endless loop of fade out and fade in. And this results in creation of blink effect. Now all you need to do is to call this function on your DOM element.

In the following jQuery code, calls blinkText method on all DOM elements which are having blinkText CSS class.

$(document).ready(function(){

blinkText('.blinkText');

});

fadeIn and fadeout method takes milliseconds as duration. From jQuery documentation, durations are given in milliseconds, so higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.

5 Top jQuery Button Plugins

Looking for cool, different ways to style your buttons? With customizable colors, shapes, and hover effects, the styling possibilities are seemingly endless, and choosing how to design your buttons and input fields can sometimes be overwhelming. If you don't want or don't have time to deal with big styling decisions but still want your buttons to look great, check out any of these plugins below.

1. jQuery UI Button



The jQuery UI Button plugin is the official jQuery plugin to enhance the appearance of standard form elements such as buttons, and anchors. The enhancements includes options for active and hover styles as well.

2. Labelauty



Labelauty is a lightweight jQuery plugin that creates beautiful input fields such as radio buttons and checkboxes.

3. jQuery addToggle


jQuery's addToggle plugin creates a minimalist on/off switch that can be added to any of your projects. Features like color and size are easily customizable to blend in with your site's theme and design.



Checkbox-field is a unique and useful plugin that will turn your mutli-select lists into beautifully organized and styled checkbox fields. Perfect for converting older, uglier designs and functionalities into something modern, new, and user-friendly.




The Bootstrap Checkbox plugin creates checkbox fields that draw inspiration from Bootstrap's button styling. If you like the style of the Bootstrap framework but aren't using it for your projects, this plugin is a great option for achieving the Boostrap look on some of your HTML elements.

7 jQuery Plugins for Form Validation


It's possible to write your own form validations, but with so many jQuery plugins available to do it for you, it's often a lot easier, simpler, and most importantly, quicker, to use a plugin to perform your validations. All of these plugins are lightweight, easy to use, and of course, will allow you add validations to your forms and save time when working on any of your projects.

1. jQuery Validation Plugin

This plugin can be used to add validation rules to any of your jQuery forms. It's lightweight and can be customized easily!


Parsley is a popular JavaScript form validation library that can be used to validate front-end forms easily and quickly. One of the benefits of using Parsley is that it's very UX focused and customizable, so it will seamlessly integrate with your projects.



Bootstrap Validator is a simple form validator plugin designed especially for the Bootstrap framework. If your site uses Bootstrap, this is a great option to use for form validation.

4. Smoke


Smoke is another form validation plugin that's meant to be used with Bootstrap. Some of its great features include support for Angular and Bootstrap's date-picker.



The Validatr plugin is unique in that it uses HTML5 input attributes to perform validation, which makes it super lightweight.



Validetta is a sef-proclaimed "tiny" plugin that can be used to perform client-side validations. If you're looking for a lightweight, simple jQuery plugin, this is a good option. 


The jQuery Ketchup plugin for form validation is great because it's built as a validation framework that can be completely customized to meet your needs. If you want a good jumping off point for making your own customizations and validation rules, Ketchup may be the way to go. 




Learn jQuery Interactively for Free

A lot of developers and coders probably agree that one of the best way to learn a new coding language, skill, or technique is to do so by learning and experimenting in a hands-on, interactive way. jQuery is no exception to this rule. If you're looking for free ways to get some real-world jQuery experience, check out any one of these resources, where you'll find interactive and free jQuery lessons to help take your skills to the next level!

1. Codecademy


Codecademy is a great free resource for learning jQuery. It's suitable for absolute beginners or for developers who may know a little jQuery but want to brush up on the basics. The free jQuery course has 7 lessons including a final project.



This interactive course was created by Code School and is another great way to learn jQuery for free. The lessons are extensive, offering 14 videos and 71 coding challenges, in addition to helpful and informative slides that will help guide you through each lesson.


This free online course is for absolute jQuery beginners, and will give you a great foundation for creating more interactive sites using jQuery.



Udacity is a site that offers free and paid courses in hundreds of different subjects, including computer science and web development. They offer this jQuery intro course completely for free, which will provide you with a great base of knowledge if you choose to take one of the more advanced courses to continue your learning.




5 Best jQuery Mobile Frameworks

Although creating a mobile app might seem like a daunting task even for the most experienced web developers who don't have much mobile experience, the truth is that most skilled developers can probably create a mobile app fairly easily -- it's really not terribly different from creating web apps. Still, it doesn't hurt to use a mobile framework to help you along the way, especially in terms of bridging the gap between mobile and web apps. Any of the frameworks below would be a welcome addition to your mobile projects.

1. jQuery Mobile


jQuery mobile is a mobile development framework that's optimized for creating multi-platform apps.


Ratchet was originally developed by Twitter as a series of prototypes for Twitter's iPhone app. Now, it's a useful framework for building out mobile apps, and comes with some helpful UIs and JavaScript plugins to get you going.



Framework7 is an open-source mobile HTML framework for developing hybrid apps with an iOS look and feel. It's specifically meant to make the transition from developing web apps to mobile apps seamless and easy.

4. Ionic
Ionic is a lightweight and scalable framework meant to develop hybrid apps. It comes loaded with JS, Sass, and HTML input components. It also works really well with Angular.js.


Mobile Angular UI is a framework that lets you use Angular and Boostrap for mobile app development -- perfect for first time app developers looking for a way to ease into mobile.