<HTML>
<HEAD>
<TITLE> jQuery creating custom animations </TITLE>
<script type="text/javascript" src="https://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</HEAD>
<BODY>
<div id="clickme" >
<font color="red"> Click here </font>
</div>
<img id="book" src="http://ampersandtr.eweb101.discountasp.net/
img/tm/co/SK/SIGIRAYA/Places%20To%20Visit%20In%20Sri%20Lanka%201.jpg"
alt="" width="200" height="223"
style="position: relative; left: 10px;" />
<script>
$('#clickme').click(function() {
$("#targetDiv").hide();
$('#book').animate({
opacity : 0.25,
left : '+=50',
height : 'toggle'
}, 5000, function() {
// Animation complete.
$("#targetDiv").html("<h3>" + "Click link to animate" + "</h3>").fadeIn("slow");
});
});
</script>
<font color="blue">
<div id="targetDiv" style="display: none;"></div>
</font>
</BODY>
</HTML>
Read More »Archive for September, 2011
September 29th, 2011
Comments Off
September 29th, 2011
Comments Off
September 29th, 2011
Comments Off
<body>
<button id="hideBtn">Hide</button>
<button id="showBtn">Show</button>
<div>
<span>jQuery</span> <span>is</span> <span>easy</span>
<span>to</span> <span>use</span> <span>and</span>
<span>gives</span> <span>dynamic output..</span>
</div>
<script>
$("#hideBtn").click(function () {
$("span:last-child").hide("fast", function () {
// use callee so don't have to name the function
/*It then hides those spans it found. The second argument to hide is a callback after the animation. That callback goes to the "previous" child (the 'something else' text node), hiding it and passing the "called function" (arguments.callee) as the callback. Which makes this a "recursive" function.
*/
$(this).prev().hide("fast", arguments.callee);
});
});
$("#showBtn").click(function () {
$("span").show(2000);
});
</script>
</body>
Incoming search terms:
Read More »
September 28th, 2011
Comments Off
.live()
This method attach a handler to the event for all elements which match the current selector, now or in the future.
September 28th, 2011
Comments Off
Sameera at LinkedIn
