CODEWITHSUNDEEP
javascriptjquery
user2025749
user2025749

Reputation: 281

Fade in and out same time

I want to fade in/out at the same time. I have the following:

visiblePanel.fadeOut(FU.featureTiming.transition, function () {
    visiblePanel.next().fadeIn(FU.featureTiming.transition, function () {
        visiblePanel.next().find('img').removeClass('displayNone')
    });
});

How can I fade out the image and fade in the next one at the same time.

Upvotes: 0

Views: 809

Answers (2)

Tom G
Tom G

Reputation: 3650

Here's an example of one div fading in and another fading out simultaneously: 

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#box1').fadeOut('slow', function() {
                 // Animation complete
            });
            $('#box2').fadeIn('slow', function() {
                 // Animation complete
         });
});
</head>
<body>
    <div style="width:100px; height:100px; background-color:green" id="box1"></div>
    <div style="width:100px; height:100px; background-color:red; display:none"  id="box2"></div>
</body>
</html>

Don't use callbacks if you want the events to occur at the same time. The callback function is executed at the termination of the animation

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

Simply don't call the next fading in the callback but call it immediately :

visiblePanel.fadeOut(FU.featureTiming.transition);
visiblePanel.next().fadeIn(FU.featureTiming.transition, function(){
    visiblePanel.next().find('img').removeClass('displayNone')
});

Upvotes: 2

Related Questions