PDA

View Full Version : fadeIn & fadeOut div content onClick image button



davelf
05-19-2012, 11:59 AM
i want to show div content onClick, image button. How to make this?:D
I find this demo (http://viralpatel.net/blogs/demo/jquery-fade-in-fade-out-div/), but the demo already show the content first. and they use button and value instead of image. How to edit this.

Thank you so much...

vwphillips
05-19-2012, 03:20 PM
image buttons should only be used to submit a form but


<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<TITLE>FadeIn FadeOut Div using jQuery - DEMO</TITLE>
<STYLE>
body, input{
font-family: Calibri, Arial;
}

#sometext {
width: 150px;
height: 150px;
padding: 10px;
border:1px solid black;
background-color: #FFEE88;
}
</STYLE>
</HEAD>
<BODY>
<H2>FadeIn FadeOut Div using jQuery - Demo</H2>
<p>Click here to view the Tutorial: <a href="http://viralpatel.net/blogs/2009/01/fadein-fadeout-fade-out-effect-in-html-text-div-using-jquery.html">FadeIn FadeOut Div using jQuery</a></p>

<input type="image" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" value="FadeIn" onclick="fade('sometext', this)"/>
<br/><br/>
<div id="sometext">
This text will Fade In and Out.
</div>


</BODY>
<SCRIPT>
function fade(div_id, button) {

if(button.value == 'FadeOut') {
$('#'+div_id).fadeOut('slow');
button.value = 'FadeIn';
}
else {
$('#'+div_id).fadeIn('slow');
button.value = 'FadeOut';
}
}

$('#sometext').fadeOut(2);

</SCRIPT>
</HTML>

davelf
05-20-2012, 04:47 AM
Thank you so much Vic.

I have another problem, here. How to change the image?
so for example i have this button "show" and after the div content appear, the button change to "hide"