CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
harpreet kaur
harpreet kaur

Reputation: 141

Fadein Fadeout Effects in Jquery

i am using jquery addClass and removeClass function

here is code

<script>
$(document).ready(function() {
    abc();

    function abc() {

        res=randomXToY(1,15,0);
            $('#img' + res).addClass('activeImg');
            setTimeout(function() {removeClassImg(res) },3000);
    }
    function removeClassImg(res) {

            $('#img' + res).removeClass('activeImg');
            abc();

    }
    function randomXToY(minVal,maxVal,floatVal)
    {
        var randVal = minVal+(Math.random()*(maxVal-minVal));
        return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
    }
});
</script>

and css is 

.activeImg{
    opacity:1 !important;
}

This is working perfect. but now i want to add fadein and Fadeout effects for this..

I dont have idea how to add Fadein effect to addClass activeimg and fadeout effect in remove class.

Anybody have idea about this

Thanks

Upvotes: 0

Views: 580

Answers (2)

Kaidul
Kaidul

Reputation: 15855

Use this :

 <script>
 $(document).ready(function() {
abc();

function abc() {

    res=randomXToY(1,15,0);
        $('#img' + res).fadeIn().addClass('activeImg');
        setTimeout(function() {removeClassImg(res) },3000);
}
function removeClassImg(res) {

        $('#img' + res).fadeOut().removeClass('activeImg');
        abc();

}
function randomXToY(minVal,maxVal,floatVal)
{
    var randVal = minVal+(Math.random()*(maxVal-minVal));
    return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}
   });
  </script>

Cheers !

Upvotes: 0

nealio82
nealio82

Reputation: 2633

Try 

$('#img' + res).fadeOut().removeClass('activeImg');

and similarly

$('#img' + res).fadeIn().addClass('activeImg');

Is there any specific reason you're using !important? That might override the JQuery from perfoming its effects to your element, so take it off if you can.

Upvotes: 3

Related Questions