1

我需要一个自定义的 jQuery 函数，它可以让我将所有文本元素定位到某个类，比如class="fontfade"，并让这些元素从它们的原始字体交叉淡入淡出到新字体。我可以像这样改变字体

$(".one").css("font-family", "Comic Sans MS");

和 HTML 代码是

<p class="one">Demonstrate transition.</p>

这里的棘手之处在于淡入淡出。我想要从以前的字体平滑过渡到新字体。我的意思是具有先前字体的文本将淡出，而具有新字体的文本将淡入。所以在某些时候可以看到两个不同字体的文本。

我正在尝试这样

$(".one").fadeOut(3000);
$(".one").css("font-family", "Comic Sans MS");
$(".one").fadeIn(3000);

不工作..

4

2 回答 2

1 
<p><a href="#" class="one">Demonstrate transition.</a></p>

<script>
    $(document).on('click', '.one' ,function() {
        $(".one").fadeOut(3000);
        $(".one").css("font-family", "Comic Sans MS");
        $(".one").fadeIn(3000);
    });
</script>


编辑：重新阅读您的帖子和评论后，也许这就是您所追求的？

<script>
    .old {
        font-family: helvetica;
    }
    .new {
        font-family: comic sans;
    }
    .hide {
        display: none;
    }
</script>


<p><a href="#" class="one">Demonstrate transition.</a></p>
<div class="old">Old Font</div>
<div class="new hide">New Font</div>

<script>
    $(document).on('click', '.one' ,function() {
        $('.old').fadeOut(500);

        $('.new').fadeIn(500, function(){
            $(this).removeClass('hide').css("font-family", "Comic Sans MS");
        });
    });
</script>
于 2014-03-10T21:52:16.510 回答
0

我创建了 div 及其文本的副本，复制了它（都使用 css 定位），然后在jsfiddle中淡化另一个

不确定这是否是您想要的，但这可能是一个开始。

HTML:
<div id="holder">
    <div class="one">
        Some Text
    </div>
</div>


CSS:
#holder {
    position:relative;
}
.two {
    font-family: helvetica;
    display: none;
}
.two, .one {
    position: absolute;
    top: 0px;
    left: 0px;
}


JS:
$(function () {
    var text = '<div class="two">' + $(".one").html() + "</div>";  
    $("#holder").append(text);
    $(".one").fadeOut(3000);
    $(".two").fadeIn(3000);
})
于 2014-03-10T21:54:44.127 回答