Jquery Tutorials by purush97k1

VIEWS: 13 PAGES: 4

More Info
									Selecting elements with Jquery | styling html elements with Jquery




We’ll be looking on how to select a HTML element lets say for instance an <h1> tag and change the
background color and the font color when clicking it, let’s get started.

To select an element in Jquery we simply pass the element’s name as a string parameter to the $
function (note the $ symbol is the short form for Jquery). Here is how the code will look

<! DOCTYPE HTML>
</head>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
</head>

<body>
<script type="text/javascript">
$(document).ready(function() {
    $('h1').click(function(){
    $(this).css('background-color','#F00')//setting a background color
    $(this).css('color','#fff') // setting font solor

});//click function end
});//document ready function end

</script>

<h1>click me and change the Background</h1>

<style>
    h1{ border: 1px solid #999; border-radius:5px; width:510px; cursor:
pointer;}
</style>
</body>
</html>
http://faqwebdevelopment.blogspot.in/2012/11/how-to-add-jquery-easing-effects-jquery.html

Lets start with the a little introduction, easing refers to the acceleration and declaration that occurs
during the course of an animation to give it a more responsive and natural feel. There are two types of
easing methods that the core Jquery library supports, which are Linear and Swing lets us see how to
implement this easing methods, but before that lets see a brief description on linear and swing easing
methods.

Linear easing:
Linear easing method accelerates and deacclereates at a constant rate which makes it look fairly boring
but it is good to know the linear easing might comin handy.




Swing easing:
Swing easing method starts off slowly before gaining speed and slows down again towards the end of
the animation , which makes it look more natural compared to Linear easing
  <! DOCTYPE HTML>
</head>
<script type="text/javascript" src="Scripts/jquery-
1.7.2.min.js"></script>

<style>
div{ margin-left:5%; border:1px solid #999; border-radius:5px;
width:350px; padding:6px; position: absolute; }
#al{ margin-top:0%; margin-left:50%;}
p{ height:150px; overflow:hidden;}
#anim{ position:absolute; margin-top:18%; margin-left:42%;}
#swing{ position:absolute; margin-top:22%; margin-left:42%;}


</style>
</head>
<body>
<div>
<p> type some text here </p>
</div>
<div id="al">
<p> type some text here </p>
</div>

<input name="animate" type="button" value="Linear" id="anim">
<input name="animate" type="button" value="Swing" id="swing">

<script type="text/javascript">
$('#anim').toggle(function() {
$('p').animate({'height':'+=150px'}, 2000, 'linear');
}, function() {
$('p').animate({'height':'-=150px'}, 2000, 'linear');
});

$('#swing').toggle(function() {
$('p').animate({'height':'-=150px'}, 2000, 'swing');
}, function() {
$('p').animate({'height':'+=150px'}, 2000, 'swing');
});

</script>

</body>
</html>

								
To top