user2573913
user2573913

Reputation: 13

Fade in and out, jquery

Help me someone with this, i want to make it when click fade out and when it back after 3 seconds fade in.

    <script type="text/javascript">
$(".controls_next2").click(linkBind);
function linkBind(){
    var $this = $(this);
        $this.addClass('disabled');
        $this.unbind('click');
        setTimeout(function() {
            $this.removeClass('disabled');
            $this.bind('click', linkBind);
        }, 3000);
}

$(document).on('click', '.disabled', function (e) {
    e.preventDefault();
});
</script>

Upvotes: 1

Views: 58

Answers (1)

colestrode
colestrode

Reputation: 10658

You can use jQuery's fadeOut and fadeIn functions. You can provide a callback to the fadeOut function, then use setTimeout to wait 3 seconds and then call fadeIn.

function linkBind() {
    var $this = $(this);
    $this.addClass('disabled');
    $this.off('click');

    $this.fadeOut(function () {
        setTimeout(function () {
            $this.removeClass('disabled');
            $this.on('click', linkBind);
            $this.fadeIn();
        }, 3000)
    });
}

Working Demo

Upvotes: 2

Related Questions