fadeIn as callback function after fadeOut doenst work as expected

1
votes

In my HTML a#navInnerMapR and a#navInnerMapL are contained within div#navTwo.

The following code is within a function. When called, I need the function to fadeOut any visible links in div#navTwo, pause for a moment, and then fadeIn a#navInnerMapR. 

$('div#navTwo a').fadeOut(200, function() {
    $('a#navInnerMapR').delay(100).fadeIn(200);
});

The code fades out the links but doesn't fade anything in. I thought that they delay would only start once the fadeOut finishes, however changing the delay value to 1000 makes it sometimes work but its very buggy. Thanks

UPDATE Here is a fiddle showing that the hidden link starts to be shown before the visible is hidden: http://jsfiddle.net/jamesbrighton/d9QKr/5/

UPDATE Apologies, my question doesnt include the full details of what I need to achieve. I simplified it as I thought I just had some sort of sytax issus that could be easily fixed.

div#navTwo actually contains 3 links. At any point (other than the delay before animations run) only 1 link is visible. I need to be able to call a function that will hide either of the other 2 links that are being shown, and then show a#navInnerMapR.

Different events will call this function, so either of the 2 links that arn't a#navInnerMapR may be visible. Thanks

UPDATE I think this fiddle illustrates the issue. Ive created 2 div.nav's to illustrate different states. Ive hidden different links with inline CSS in each one. JavaScript will be showing and hiding the links in my div repeatedly, so the same div will look like each example at different times.

Ive created 2 triggers to illustrate that different events will need to call the function. When you click on a trigger you can see the issue with both examples. The visible divs are not hidden before the a.one is shown. Thanks for your patience!

http://jsfiddle.net/jamesbrighton/dYvMS/24/

Interesting point, if I change $('.nav a.one').fadeIn(1000); to an alert, the alert fires multiple times! No idea why this would be the case!

2
javascriptjquerycallbackdelayfadeout
Works for me. Btw, you don't need a delay because the callback will be called once after the fadeOut animation is over. – Selvakumar Arumugam
It looks like the hidden link starts to be shown before the visible one is hidden jsfiddle.net/jamesbrighton/d9QKr – Evanss
What are you trying to achive? How do you want it to work? For ex: What should happen when Right linked is clicked? Try jsfiddle.net/skram/d9QKr/6 <- Is this something you want? – Selvakumar Arumugam
Yes thats what I want but I need the animation in a function I can call as clicking different things will make it happen. Why does my code not work like yourse? Thanks – Evanss
Technically I want a delay in between the fading out and fading in so this is more what I want, but like said I need to be able to call the function with multiple events. The events also have various conditionals to them firing which is why its importnat to separate things out. jsfiddle.net/jamesbrighton/tbAF7 – Evanss

2 Answers

1
votes

Edit: Updated answer based on your below comment,

Yes this works as I need, but im not sure it will work for my actual page. Sorry for my question not being detailed enough. The code example I gave is simplified. In the actual page their are 3 links within div#navTwo, at any time only one of them will be visible. I need to be able to call a function that hides any links and shows a specific one, but either one of the other 2 links in div#navTwo may be visible. Thanks

DEMO

HTML: Added class to all links inside navTwo

<div id="navTwo">
    <a href="#" id="navInnerMapR" class="links">Right</a>
    <a href="#" id="navInnerMapL" class="links">Left</a>
    <a href="#" id="navInnerMapM" class="links">Middle</a>
    <a href="#" id="navInnerMapU" class="links">Upper</a>
    <a href="#" id="navInnerMapLW" class="links">Lower</a>
</div>

JS:

$('.links').click(function() {
       showHide($(this));
});

function showHide($this) {    
    $this.fadeOut(1000, function() {
         $('#navTwo a').not($this).delay(1000).fadeIn(1000);
    });
}

I think I understood what you need. Try below DEMO and let me know if that is what you want,

DEMO

$('#navInnerMapR').click(function() {
       runMeR($(this));
});
$('#navInnerMapL').click(function() {
       runMeL($(this));
});

function runMeR($this) {    
    $this.fadeOut(1000, function() {
         $('a#navInnerMapL').delay(1000).fadeIn(1000);
    });
}
function runMeL($this) {    
    $this.fadeOut(1000, function() {
        $('a#navInnerMapR').delay(1000).fadeIn(1000);
    });
}
0
votes

As you said, You need the function to fadeOut any visible links in div#navTwo, pause for a moment, and then fadeIn a#navInnerMapR (not other links, only a#navInnerMapR).

$('#navTwo a').click(function(e) {
    $(this).parent().children().each(function(i){
        $(this).fadeOut('slow', function(){
            $('a#navInnerMapR').delay(1000).fadeIn(1000);
        });
    });
});​

A fiddle is here.