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.

Expand|Select|Wrap|Line Numbers

 <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

Jan 11 '11 #1

Subscribe Post Reply

2015

dlite922

1,584

Expert 1GB

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

DM

Jan 17 '11 #2

kiko valente

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.

Expand|Select|Wrap|Line Numbers

 $('#changeview').html('<a href="javascript:void(0)" onclick="swapDisplay(' + (!action) + ')"><img src="_imagens/separador1.jpg" alt="mudar vista" /></a>');
 

Expand|Select|Wrap|Line Numbers

 <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

Jan 18 '11 #3

Similar topics

Image display with fade in/out

by: Acer | last post by:

Hi, Can somebody help me to create a php function which show an image, fade-out to another images ? thx

PHP

Add randomizing function to fade-effect slideshow?

by: Susanna | last post by:

Hi all, I'm using the following slideshow script that I found on the web to display changing images with a crossfade effect. Eventually I will be adding many more images to the slideshow. The...

Javascript

Display image fade function

by: Acer | last post by:

Does somebody know a javascript function to show an image and fade-out to another picture ? thanks for any help

Javascript

Fade Class

by: Chris Lieb | last post by:

Hi, I am writing a class in JavaScript to cause a repeating fade effect. The fade class takes care of the fading and the rgb class takes care of manipulating rgb values: function rgb(red,...

Javascript

Translucent Forms & Fade Effects

by: tristanlbailey | last post by:

I have been attempting to solve this problem for a few weeks now, but I'm not having much luck... I would like to create a seamless fading effect on each form/window in my program; one that, when...

Visual Basic 4 / 5 / 6

Fade effect in a usercontrol

by: Ali Rizwan | last post by:

Hi all, I made a usercontrol and want to give fade effects to it. Now problem is that i m using alpha command as i use in my cool form. Nothing is happninig. How can i give fade effect to a...

Visual Basic 4 / 5 / 6

Delete effect

by: Maximiliano | last post by:

Is there any way to handle a fade effect like script.aculo.us but on the server side?. I mean a call a fade effect and i want to know when it finished to raise another server method? I need this...

ASP.NET

apply fade effect on innerHTML

by: pt36 | last post by:

Hi I have a small script function photo(a){ var photo = a ; document.getElementById(photoID).innerHTML = photo; } and on the body

Javascript

Automatic content exchange with fade effect

by: ilija | last post by:

Hello! As I am not much familiar with javascript (I know the basics of basics), I cannot find any script that would satisfy my needs. What I want is something like this:...

Javascript

How to add jquery fade effect on ajax html banner rotator?

by: Tj Jurado | last post by:

Hi guys, I am new to this and need a little help. I have an html block to be rotated and placed in an array via php as well as printed as an xml format then. Without refreshing the page, the...

Javascript

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware