[HELP] fadeIn and button swapping.

Spamsational

05-20-2012, 04:41 PM

DISCLAIMER: as you can see this is homework, I have done nearly all of it I am just stumped on the final bit and require some assistance. If you don't want to help because it is homework; please stop reading and I'm sorry I 've wasted your time.

Hey guys, just wondering if I could get some help. I am currently wondering why my button wont fade out the 'curtain' image and was also wondering how I could get the button "Open Curtains" to be replaced with "Close Curtains" when clicked (keeping in mind the "Open Curtains" should be the button intially loaded.)

What I have is as follows:

<!DOCTYPE html>
<head>
<title>Prac 10</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("#curtain").fadeOut();
});
$(".btn2").click(function(){
$("#transformer").fadeIn();
});
});
</script>
<style type="text/css">
#curtain
{
position:absolute;
left:10px;
}
#screen
{
position:absolute;
left:50px;
top:150px;
}
#transformer
{
position:absolute;
left:55px;
top:190px;
width:385px;
height:35%;
}
</style>
</head>
<body>
<div style="height:500px" align=center>
<img id="transformer" src="images/Transformer4.jpg" />
<img id="screen" src="images/Screen.jpg" />
<img id="curtain" src="images/Curtain.jpg" />
</div>
<div class="buttons" style="margin-left:135px">
<button class="btn1">Open Curtain</button>
<button class="btn2">Close Curtain</button>
</div>
</div>

</body>
</html>

Old Pedant

05-20-2012, 09:51 PM

Totally the wrong forum. This has ZERO to do with MySQL.

sunfighter

05-21-2012, 10:38 PM

Your missing a <html> tag
Has an extra </div> tag.

Had to use my images and at first had no buttons. Maybe set the height and width on your images, it's good programming.

Had to use <script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script> in order to get the fade to work. Maybe your js is not where you think it is.

New code:
<!DOCTYPE html>
<html>
<head>
<title>Prac 10</title>
<script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
#curtain
{
position:absolute;
left:10px;
height: 400px;
}
#screen
{
position:absolute;
left:50px;
top:150px;
}
#transformer
{
position:absolute;
left:55px;
top:190px;
width:385px;
height:35%;
}
.btn1
{
display: block;
}
.btn2
{
display: none;
}
</style>
</head>
<body>
<div style="height:500px" align=center>
<img id="transformer" src="images/Transformer4.jpg">
<img id="screen" src="images/Screen.jpg">
<img id="curtain" src="images/Curtain.jpg">
</div>
<div class="buttons" style="margin-left:5px">
<button type="button" class="btn1">Open Curtain</button>
<button type="button" class="btn2">Close Curtain</button>
</div>
<script type="text/javascript">
$(document).ready(function(){

$(".btn1").click(function(){
$("#curtain").fadeOut('slow');
//$('.btn1').text('Close Curtain');
$(this).hide();
$('.btn2').show();
});

$(".btn2").click(function(){
$("#curtain").fadeIn('slow');
$(this).hide();
$('.btn1').show();
});

});
</script>
</body>
</html>

guelphdad

05-22-2012, 07:18 PM

DISCLAIMER: as you can see this is homework, I have done nearly all of it I am just stumped on the final bit and require some assistance. If you don't want to help because it is homework; please stop reading and I'm sorry I 've wasted your time.

As an FYI, for this or other forums, you are most likely to get help because of the following reasons:

a) you've labeled it as homework
b) most importantly, you've shown that you've attempted to do the work yourself and now need help solving some part to get a conclusive answer.

Many people who post homework don't bother to do either.

But do check you are in the right forum when posting. Thread has been moved from MySQL forum.