Swap display action with fade effect

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • kiko valente
    New Member
    • Jan 2011
    • 2

    Swap display action with fade effect

    Hi there first posting, I'm also no programmer myself so please be gentle
    I´m 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'm using jQuery library.

    Code:
    <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">
         <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
  • dlite922
    Recognized Expert Top Contributor
    • Dec 2007
    • 1586

    #2
    Can you describe the problem more in detail? Where are you getting stuck in the code?

    DM

    Comment

    • kiko valente
      New Member
      • Jan 2011
      • 2

      #3
      Hi thanks for your reply.

      The code above is working fine, I'm having trouble in making the image swap display work with a fade effect, when the change view button is clicked.
      Hope i'm being clear enough.

      This is the part of the code i'm refering to, the complete code is on the first post.


      Code:
      $('#changeview').html('<a href="javascript:void(0)" onclick="swapDisplay(' + (!action) + ')"><img src="_imagens/separador1.jpg" alt="mudar vista" /></a>');
      Code:
      <p id="changeview"><a href="javascript:void(0)" onclick="swapDisplay(false)"><img src="_imagens/separador1.jpg" width="19" height="17" /></a></p>
      Thanks in advance

      Comment

      Working...