CODEWITHSUNDEEP
javascriptjquery
Bear John
Bear John

Reputation: 3345

javascript: fade div in on button click, then on 2nd button click fade out?

can someone help i am trying to get a div to fade in when a user clicks a button/div. then on the second click i want the div to fade out again, i want this script to be repetitive/repeat.

here's what i am using to fade the div in:

<script>

    $('.submit_review').click(function () {
        if ($('.submit_review').is(":visible")) {
             $('.review_submit_box').delay(400).fadeIn(300);




        }
    });
</script>

here's what i have tried to do to get it to fade in and out on button click, but i need a push in the right direction thanks.

<script>

    $('.submit_review').click(function () {
        if ($('.submit_review').is(":visible")) {
             $('.review_submit_box').delay(400).fadeIn(300);

        } else if ( $('.submit_review').click(function () {
         $('.review_submit_box').is(":visible")) {
            $('.review_submit_box').fadeOut(300);



        }
    });
</script>

html:

<div class="reviews_section">
<div class="submit_review"><div class="
submit_review_text">Submit a Review</div></div>
<div class="review_submit_box"></div>
</div>
<div class="reviews_section2">
<?php include('includes/mod_profile/mod_reviews/mod_reviews.php'); ?>

</div>

Upvotes: 1

Views: 10295

Answers (5)

Gash
Gash

Reputation: 81

My method involved checking for the indexes of the div and button elements by using the jquery selector.

I used index() to get the position of the elements with the class name ".review_submit_box" and have it fade out if it doesnt have the same index as the calling ".submit_review" button.

The number of divs with the class name ".review_submit_box" have to be the same number as the buttons with the class name ".submit_review" to work properly without issues. And also matching indexes for the right button to call the right box. This is sorted in arranging the html. (i.e. to make the first button in a class of buttons call the first div in a class of divs which has the same index/position as the calling button )

To make it automatic, you can make another function to fade out all divs and fade in the div with an index matching a variable with a value that iterates and has a timeout to call the function repeatedly.

My Solution was better meant for carousels and not review boxes, hope it helps.

HTML

<div class="review_submit_box">
                    <div>
                        <h2>BEST DESIGN</h2>
                    </div>
                </div>

                <div class="review_submit_box">
                    <div>
                        <h2>BEST SERVICES</h2>
                    </div>
                </div>

                <div class="review_submit_box">
                    <div>
                        <h2>BEST EQUIPMENT</h2>
                    </div>
                </div>

                <div id="controls-div">
                    <button class="submit_review">SHOW</button>
                    <button class="submit_review">SHOW</button>
                    <button class="submit_review">SHOW</button>
                </div>

JQUERY

//GLOBAL VARIABLES
var activeCarouselIndex = 0;

//FADE OUT OTHER DIVS AND FADE IN THE DIV WITH SAME INDEX AS CALLING BUTTON
$( ".submit_review" ).on('click',function(event){

    var carouselBtnIndex = $(this).index();

    alert("You have clicked button with index: "+carouselBtnIndex );

    activeCarouselIndex = carouselBtnIndex;

    $( ".review_submit_box" ).each(function() {

        if( $(this).index() !== activeCarouselIndex ) {

            $(this).fadeOut(900);

        } else {

            $(this).fadeIn(900);    
        }

    });

});

//SET AUTOMATIC SLIDING
slideCarousels();

function slideCarousels() {

    $( ".review_submit_box" ).each(function() {

        if( $(this).index() !== activeCarouselIndex ) {
            $(this).fadeOut(900);
        }

    });

    $( ".review_submit_box" ).eq(activeCarouselIndex).fadeIn(900);

    activeCarouselIndex++;
    if (activeCarouselIndex >= $( ".review_submit_box" ).length) {activeCarouselIndex = 0}

    setTimeout(slideCarousels, 2000); // Change every 2 seconds

}

Upvotes: 0

Xotic750
Xotic750

Reputation: 23502

Here is a method using javascript and css3

The keyframes (there are 3 of them for each method, supporting webkit, firefox and standard) and they define our start and end states.

The class (fade-in, fade-out) assigns what kind of animation we will perform. Which is: do the keyframes matching the class, using ease-in animation and only do it once and remain at the last keyframe.

The class one just demonstrates how we can give different delays to different elements.

Finally, we have two buttons (Fade and Fade Out). Each has an "click" event listener attached. When clicked they swap the class on the div so that the animation is performed. CSS

@-webkit-keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.fade-in {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
.fade-in.one {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}
@-webkit-keyframes fadeOut {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-moz-keyframes fadeOut {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@keyframes fadeOut {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
.fade-out {
    opacity:1;
    -webkit-animation:fadeOut ease-in 1;
    -moz-animation:fadeOut ease-in 1;
    animation:fadeOut ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
.fade-out.one {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

HTML

<button id="in">Fade In</button>
<button id="out">Fade Out</button>
<div id="myDiv" class="fade-in one">Some text</div>

Javascript

var myDiv = document.getElementById("myDiv");

document.getElementById("in").addEventListener("click", function () {
    myDiv.className = myDiv.className.replace(/fade-out/, "").trim() + " fade-in";
}, false);

document.getElementById("out").addEventListener("click", function () {
    myDiv.className = myDiv.className.replace(/fade-in/, "").trim() + " fade-out";
}, false);

On jsfiddle

Upvotes: 0

visnu
visnu

Reputation: 935

Try this http://jsfiddle.net/gabrieleromanato/cX88R/

var test = $('#test'),
    $in = $('#in'),
    out = $('#out'),
    toggle = $('#toggle'),
    to = $('#to');


$in.click(function() {
    test.fadeIn(1000, function() {
        alert('Complete');
    });
});


out.click(function() {
    test.fadeOut(1000, function() {
        alert('Complete');
    });
});


toggle.click(function() {
    test.fadeToggle(1000, function() {
        alert('Complete');
    });
});

to.click(function() {
    test.fadeTo(1000, 0.5, function() {
        alert('Complete');
    });
});

Upvotes: 0

gmaliar
gmaliar

Reputation: 5489

Rather than to check if is(:visible) just add a hidden class to the div and check if it exsits.

$(function() {
    $('#divvy').addClass('hidden').hide();
    $('#button').click(function() {
        if ($('#divvy').hasClass('hidden')) {
            $('#divvy').removeClass('hidden').fadeIn(1000);
        }
        else {
            $('#divvy').addClass('hidden').fadeOut(1000);
        }
    });
});


<div id="divvy">
    I will appear and then fade!
</div>
<input type="button" value="Click me" id="button" />

jsfiddle: http://jsfiddle.net/j7HTY/1/

Upvotes: 0

Oktav
Oktav

Reputation: 2151

Why not simply use jQuery's fadeToggle http://api.jquery.com/fadeToggle/

You could toggle the fade in/out on click and that would reduce your code to a couple of lines

EDIT: Here's some code

$('.submit_review').click(function() {
  $('.review_submit_box').fadeToggle(300)
})

Upvotes: 3

Related Questions