My first code is a simple delay timer.
The original code I gathered is within the JQ trial1.html
The second JS is a transitional effect:
The original code is in JS trial 2.html
In 49.html
Click bands to see them appear.
Click run and hid to see the...run and hide
The code:
<!doctype html>
<html lang="en"> <!-- JS both from jquery.com -->
<head>
<meta charset="utf-8">
<title>delay effect</title>
<style>
div {
position: absolute;
width: 220px;
height: 160px;
float: left;
}
.first {
background-image: url("NIN.jpg");
left: 0;
}
.second {
left: 300px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><button>The bands</button></p>
<div class="first"></div>
<div class="second"><img src="Syd Barett lead pink floyd.jpg" usemap="#image-map">
<!-- had help from Nabeel to do this-->
<map name="image-map">
<area target="" alt="Syd Barret Pink Floyd" title="Syd Barret Pink Floyd" href="" coords="2,2,239,205" shape="rect">
</map></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p><input type="button" value="Run and hide"></p>
<div></div>
<script>
$( "button" ).click(function() {
$( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
$( "div.second" ).slideUp( 300 ).fadeIn( 400 );
});
jQuery.fx.interval = 100;
$( "input" ).click(function() {
$( "div" ).toggle( 3000 );
});
</script>
</body>
</html>
No comments:
Post a Comment