Question

我需要淡化div的文本而不淡化文本的容器。 Here is my work。我需要第8行像第7行一样工作，所以我可以删除文本周围的容器div（content）。换句话说，我需要在点击时为div文本的颜色变化设置动画。有什么想法吗？

$(document).ready( function(){
    var x = false;
    $('#changeWidth').click(function() {
        if(x){}
        else{
            x = true;
            $(".content").fadeToggle(300);
            //$("#changeWidth").html().fadeToggle(300);
            var toggleWidth = $(".inner").width() == 30 ? "350px" : "30px";
            var toggleHeight = $(".inner").height() == 10 ? "48px" : "10px";
            $('.inner').animate({ width: toggleWidth, height: toggleHeight });
            setTimeout(function(){x=false;},500);
        }
    });
});

提前致谢

编辑：几个月后回顾这个问题，this is how I'd do it使用CSS过渡和切换

Answer 1

Fiddle。这符合您的需求吗？你可以这样做：

HTML：

<p class="toHide">jQuery</p>

JS：

$('.toHide').click(function(){
    $(this).css('color', 'white');
});

如果要将动画用于颜色，则必须包含此插件：https://github.com/jquery/jquery-color

$('.toHide').click(function(){
    $(this).animate{(color: 'white'), 50};
});

或者你可以使用带有CSS转换的toggleClass（）!! （这是最好的选择!!）：

$('.toHide').click(function(){
    $(this).toggleClass('colorWhite');
});

褪色innerHTML，而不是完整元素

1 个答案: