Jquery中的Fadein Fadeout效果

时间:2012-05-23 08:31:32

标签: jquery html css jquery-ui

我正在使用jquery addClass和removeClass函数

这是代码

<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>

和css是

.activeImg{
    opacity:1 !important;
}

这是完美的。但现在我想为此添加fadein和Fadeout效果..

我不知道如何在删除类中添加Fadein效果到addClass activeimg和fadeout效果。

任何人都对此有所了解

由于

2 个答案:

答案 0 :(得分:3)

尝试

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

和类似的

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

您使用的具体原因是什么!重要吗?这可能会覆盖JQuery,使其对你的元素产生影响,所以如果可以的话就把它取下来。

答案 1 :(得分:0)

使用此:

 <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>

干杯!