1
$(".link").click(function (e) {
     e.preventDefault();      
    var $urlToLoad = $(this).attr('href');  
    $('#result').load($urlToLoad, function(data){

        $("#fade").fadeOut('slow'); //added to show fade effect on second click
        $("#fade").fadeIn('slow');

    });      
});

I basically have two external pages that I load on .click with fade effect. In order for the div#result to show fade effect on second click/loading, I've added [$("#fade").fadeOut('slow');].

However, this results in the loaded page showing first & fades out & in. I tried changing the oder of [$("#fade").fadeOut('slow');] but same result.

I am sure there is a way to do this the right way but I do not have enough understanding of jQuery to achieve the desired effect.

Can anyone help? Any suggestion? How should it be rewritten?

1
  • So, you want the page to simply fade in? Or, are you trying to create a flicker effect?
    – Joe
    Mar 20, 2013 at 18:56

5 Answers 5

1

May be you want a fadeToggle:

$("#fade").fadeToggle('slow');

or

$("#fade").fadeOut('slow').fadeIn('slow');

or this could be useful:

$("#fade").hide().fadeIn('slow');
1

How about using...

$("#fade").hide().fadeIn('slow');
3
  • because that will fade it in every time Mar 20, 2013 at 19:01
  • thanks. adding .hide solved the problem. I had solved it by adding setTimeout(function(){ but simply adding .hide is much better.
    – Matthew
    Mar 20, 2013 at 19:07
  • Glad to help. I've run into this problem many times before :) Mar 20, 2013 at 19:09
0

im really taking a shot in the dark here because you're question is a bit unclear but it seems like a simple implementation of fadeToggle would solve this.

$(".link").click(function (e) {
    e.preventDefault();      
    var $urlToLoad = $(this).attr('href');  
    $('#result').load($urlToLoad, function(data){
        $("#fade").fadeToggle('slow');
    });      
});

im assuming you want that when you click on the link, it should make a call to the server, get the data, fill the matching element with the data, and then fade the element into view. then upon clicking again you want it to fade the element out of view. If this is the case, the above code will work but to make sure that the #result div is not going to show up from the get go you need to set it to display:none in css. fadetoggle will take care of the rest.

1
  • 1
    if you do fadeToggle, that makes the div#result fadeOut / disappear on second click. Sorry, I forgot to mention I had tried fadeToggle already. What solved the issue was either adding setTimeout(function(){ or adding .hide. Thanks.
    – Matthew
    Mar 20, 2013 at 19:10
0

What I've understand is you want to fadeAway #fade and when you load content fade it back in, right?

$(".link").click(function (e) {
    e.preventDefault();
    var $urlToLoad = $(this).attr('href');

    if ($("#fade").length) {
        $("#fade").fadeOut('slow', function () {
            loadContent($urlToLoad)
        });
    } else {
        loadContent($urlToLoad)
    }

});

function loadContent(url) {
    $('#result').load(url, function (data) {
        $("#fade").fadeIn('slow');
    });
}
2
  • I had mentioned in the question above that I had tried it like this already. :) This didn't solve the issue. Adding .hide or setTimeout solved the issue. Thanks.
    – Matthew
    Mar 20, 2013 at 19:12
  • I'm not quite sure you have tried what I'm posting here but anyway your code your problem. Also you're not providing info on what you're loading , so I have to guess that $("#fade") is loaded from another page.
    – user2050799
    Mar 20, 2013 at 19:17
0

triggerring the function on doc load, and letting it run endlessly.

http://jsfiddle.net/WvpVK/

What did is,

form the steps:

1- change the url on every trigger,
2- trigger the change after a specific count of time
3- change the url again for the next img.

/*---------------------------------------------------------------------------*/
<br><Br>
imgcnt=1;

function chngimg(){

if(imgcnt<5){


    imgcnt = imgcnt + 1;
        /*newvar = chngimg(imgcnt);*/
        //alert(newvar);

       // alert(imgcnt);

newvar = 'http://www.buzzle.com/images/cliparts/numbers/'+imgcnt+'.png';
    $( "#transit" ).fadeOut(1500,
        function(){ $( "#transit" ).attr({  src: newvar,  title: "Banner", alt: "Halloween"});$( "#transit" ).fadeIn(1500);
                });
    }
    else{imgcnt=0;}
}
$(document).ready(function(){

/**increament value, after 3-4 sec
setInterval, call function to increament,
send increased value to string and change image
after it reaches the last img, 
reset the counter.**/

setInterval(function() {
    chngimg();
},4000);

});

/*---------------------------------------------------------------------------*/
<br><Br>

Thats my image

Thats my image

**similar thing can be done with the help of an array.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.