Tiger Bird Webdesign: Blinking Neon Sign With jQuery

Monday, 1 December 2014

Blinking Neon Sign With jQuery

Welcome!

You can spice up your website with some JavaScript animation. The example shows a text which fades out and fades in 10 times in a row with the while loop.

jQuery ―which uses the $ sign in front of each element ―makes it easy to write codes for animations. The blinking starts with the value var i=0 and finished after blinking for 10 times which is set as while(i<10). In function() you include the fadeOut() and fadeIn() methods to create the blinking effect. For details, have a look at the code!

CSS, HTML & JavaScript Code



<!Doctype HTML>

<html>

<head>
<title>Blinking Neon Sign With jQuery </title>

<style>


#welcome
{
position:absolute;
padding:40px;
font-size:500%;
color:white;
text-shadow:
2px 2px 10px DeepPink,
2px 4px 20px DeepPink,
2px 6px 30px DeepPink,
2px 8px 50px DeepPink;
}


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript" language="Javascript">
</script>

<script>
//this is the jQuery code
var i=0
while(i<10){
$(document).ready(function(){
$("#welcome").fadeOut("slow").fadeIn("slow");
});
i++;
}
</script>



</head>

<body>

<div id="welcome">Welcome!</div>

</body>

</html>

Tiger Bird Webdesign

Monday, 1 December 2014

Blinking Neon Sign With jQuery

CSS, HTML & JavaScript Code

No comments:

Post a Comment