PDA

View Full Version : swap display action with fade effect NEED HELP



kiko
Jan 11th, 2011, 08:16 PM
Hi there first posting, I'm also no programmer myself so please be gentle :)
Im not to confortable on terminology so I'll post the code to simplier discribe my question

I would like some help, to add a fade transition to this swap action onclick, is it possible to do?

Here's the code I'm using, everything is working fine, I just want to add this effect. I've highlighted the code part I'm having trouble with. I'm using jQuery library.


<script type="text/javascript" src="_js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('#loading').hide();
})
</script>
<script type="text/javascript">
$(window).bind("load", function() {
$('#container').fadeIn('fast');
});
</script>
<script type="text/javascript">
function swapDisplay(action)
{
if(action)
{
$('.thumbstyle img').css({"opacity": 0});

$('.thumbstyle img').hover(function() {
$(this).stop().animate({ "opacity": 1 }, 'fast');
}, function() {
$(this).stop().animate({ "opacity": 0 }, 'fast');
});
}
else
{
$('.thumbstyle img').css({"opacity": 1});

$('.thumbstyle img').hover(function() {
$(this).stop().animate({ "opacity": 0 }, 'fast');
}, function() {
$(this).stop().animate({ "opacity": 1 }, 'fast');
});
}
$('#changeview').html('<a href="javascript:void(0)" onclick="swapDisplay(' + (!action) + ')"><img src="_imagens/separador1.jpg" alt="mudar vista" /></a>');
}
</script>
</head>
<body onload="swapDisplay(false)">
<div id="loading"><img src="_imagens/loader.gif" width="19" height="4" alt="loading..." /></div>
<div id="container" style="display: none;">
<a name="top" id="top"></a>
<div id="content">
<div id="logo">
<h1><a href="index.html"><img src="_imagens/logo.jpg" width="51" height="51" alt="logo" /></a></h1>
<p id="changeview"><a href="javascript:void(0)" onclick="swapDisplay(false)"><img src="_imagens/separador1.jpg" width="19" height="17" /></a></p>
</div>


Thanks in advance
Regards