www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Fadein and out image and text combined

Hybrid View

  1. #1
    Join Date
    Aug 2009
    Posts
    20

    resolved [RESOLVED] Fadein and out image and text combined

    I have two links: an image and a header text. On mouseover of the header or the image, the image should slowly fade into another image and a text below the heading will slowly show up at the same time. On mouseout it should look like it does from the start with a smooth fadeout.

    I have made an example of this here. What needs to be solved is that I cannot combine the scripts so that the multiple effects happen at the same time (when mouseover on header or image). Link:

    http://www.tilnorsk.com/fade/

    Code:

    ( I could not find an easier version of the two images that fadein/fadeout that works in several browsers than the one below where I could regulate the fadein and fadeout speed )

    [CODE]

    <!DOCTYPE html>
    <html>

    <head>

    <title>Fadein and Fadeout</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    <style type="text/css">

    #pak {
    margin: 30px 0 0 30px;
    width:400px;
    height:400px;
    background:black url(rainforest1.jpg);
    }

    #pak img {
    opacity:0;
    display:block;
    }

    #hover {
    font-size: 13px;
    font-weight: bold;
    font-family: arial;
    width: 116px;
    height: 15px;
    margin: 30px 0 0 30px;
    }

    #hover a {
    text-decoration: none;
    color: black;
    }

    #effect {
    font-size: 12px;
    font-family: arial;
    margin: 10px 0 0 30px;
    display: none;
    color: #999898;
    }

    </style>

    <script type="text/javascript">

    function fade(el, way){
    /*Modern Browser Fader by John Davenport Scheuer
    This comment must remain for Legal Use */
    clearTimeout(el.timer);
    var targ_op=way=='in'&&el.filters&&el.filters[0]? 100 : way=='in'? 1 : 0;
    var waym=way=='in'? 1 : -1;
    var optype=el.filters&&el.filters[0]&&typeof el.filters[0].opacity=='number'? el.filters[0] : el.style;
    var opinc=el.filters&&el.filters[0]? 10 : .1;
    if(/number|string/.test(typeof optype.opacity))
    optype.opacity=optype.opacity*1 + opinc*waym;
    else
    return;
    if(optype.opacity!=targ_op)
    el.timer=setTimeout(function(){fade(el, way)}, 90);
    }

    </script>

    <script type="text/javascript">
    $(document).ready(function(){
    $('#hover').hover(
    function(){$('#effect').fadeIn(1400)},
    function(){$('#effect').fadeOut(1400)}
    );
    });
    </script>

    </head>

    <body>

    <div id="pak"><a href=""><img border="0" src="rainforest2.jpg" alt="" onmouseover="fade(this, 'in');" onmouseout="fade(this, 'out');"></a></div>

    <div id='hover'><a href="">THE RAINFOREST</a></div>
    <div id='effect'>There are many animals in the rainforest</div>

    </body>

    </html>

    [CODE]

    So when mouseover on header I want a text below to fadein slowly and at the same time the image above will slowly fade into another image. On mouseout slowly fade out and back to normal on both. In the same way when mouseover on image it should slowly fade into another image and simultaneously the text below the header should fadein. On mouseout slowly fade out and back to normal on both.

    I am very much appreciating all the help I can get. Thank you.

  2. #2
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    Code:
    <!DOCTYPE html>
     <html>
    
     <head>
    
     <title>Fadein and Fadeout</title>
    
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    
     <style type="text/css">
    
     #pak {
     margin: 30px 0 0 30px;
     width:400px;
     height:400px;
     background:black url(rainforest1.jpg);
     }
    
     #pak img {
     opacity:0;
     display:block;
     }
    
     #hover {
     font-size: 13px;
     font-weight: bold;
     font-family: arial;
     width: 116px;
     height: 15px;
     margin: 30px 0 0 30px;
     }
    
     #hover a {
     text-decoration: none;
     color: black;
     }
    
     #effect {
     font-size: 12px;
     font-family: arial;
     margin: 10px 0 0 30px;
     opacity: 0;
     color: #999898;
     }
    
     </style>
    
     <script type="text/javascript">
     $(document).ready(function(){
        $('#hover, #pak').hover(
            function(){
                $('#effect, #myimg').stop( true ).animate( { opacity : 1 }, 1400 )
                },
            function(){
                $('#effect, #myimg').animate( { opacity : 0 }, 1400 )
                }
            );
        });
     </script>
    
     </head>
    
     <body>
    
     <div id="pak"><a href=""><img id="myimg" src="rainforest2.jpg" alt=""></a></div>
     <div id='hover'><a href="">THE RAINFOREST</a></div>
     <div id='effect'>There are many animals in the rainforest</div>
    
     </body>
    
     </html>
    Since you are already using jquery, there is no need for that fancy function, into which i am too lazy to look anyway

    I used .animate() rather than .fadeIn().

    However, note, that opacity doesn't work for IE8 and below.
    Last edited by haulin; 02-19-2013 at 08:48 AM.

  3. #3
    Join Date
    Aug 2009
    Posts
    20
    Excellent. Thank you very much. You made me very happy. It almost worked in IE8 directly, I just needed to add filter: alpha(opacity=0); in the CSS for #pak img and #effect for it to work all the way. Thanks again :-)

  4. #4
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    Yeah, you're welcome. I usually use solution suggested by PPK, which is to use opacity, filter and -ms-filter in that order, so it would work in IE8 compatibility mode with IE7.

    Also, on top of the comments is a button Thread tools, so mark this as Resolved.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles