Jquery how to do image show hid
I am new to html especially to jquery but I want to show hide a photo on click. I pulled some sample code which is exactly what I want. I did not write this code and I am wanting to modify the code for an image versus a div. The code is noted below.
I have tried this several different ways and the My goal:
1. To hide an image versus a div tagAny help would be wonderful
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Hello 3,</div>
<div>how</div>
<div>are</div>
<div>you?</div>
<script>
$("#showr").click(function () {
$("div:eq(0)").show("fast", function () {
/* use callee so don't have to name the function */
$(this).next("div").show("fast", arguments.callee);
});
});
$("#hidr").click(fu开发者_开发问答nction () {
$("div").hide(2000);
});
</script>
</body>
</html>
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div id="div">Test</div>
For images, just change the div
to img
(or stick your images in the divs and change nothing in the script, whatever floats your boat), like this:
$("#showr").click(function () {
$("img:eq(0)").show("fast", function () {
$(this).next("img").show("fast", arguments.callee);
});
});
$("#hidr").click(function () {
$("img").hide(2000);
});
The div
parts of the script were saying "match <div>
tags", since you want <img>
tags, you can just swap it out like above. Also, I'm guessing this was taken from something else/larger, in that case you can probably remove the , arguments.callee
part, but I'm not 100% sure, depends on what it was supposed to do.
精彩评论