Home/ Questions/Q 6966925
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T16:15:19+00:00

Im trying to make this image fade into the one below it using a

  • 0

Im trying to make this image fade into the one below it using a jQuery animation and then have the webpage load about 2 seconds after the fade. How do set a timer for the second function to load? Here is my code:

<html>                                                          
<head>                                                                  
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.fade
{
z-index:1;}
.abs
{position:absolute;
    z-index: 10;}
</style>
</head>
<body>
    <div id="fadephoto">

    <div id="f4d" class="abs">
    <img  src="1.jpg" >

    </div>
<div class="fade">  <img src="4.jpg" /></div>
</div>

</body>  

<script>
{var fadeClicked = false;}
$("#f4d").click(function () {
$(this).fadeTo(2000, 0.01)
fadeClicked = true;
});

$('#fadephoto').click(function()
{
    if (fadeClicked)
    {
        window.location.href = ('http://www.ifdvidfji.com');
    }
});

</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use settimeout. Because you don’t want to repeat code you can trigger the click event on your manual bypass.

    http://jsfiddle.net/3nKDD/

    $("#f4d").click(function() {
    $(this).fadeTo(2000, 0.01)
    fadeClicked = true;
    setTimeout(function() { $('#fadephoto').trigger('click'); }, 2200);
});

    Although I would restructure your javascript because right now clicking triggers both handlers and I think you only want it to trigger one of them.

    http://jsfiddle.net/3nKDD/2/

    • 0