jquery - 淡出后延迟 $link.text (jquery)

Question

我希望第二个 [阅读更多] 在.content淡出后出现。jsfiddle

HTML

<div>
    <span class="heading">This is the beginning of the sentence. </span>
    <span class="content">This is the end of the sentence. </span>
</div>

CSS

.heading {
    cursor: pointer;
}

JS

$(document).ready(function () {
    $('.content').after('<a href="#" class="toggle-link">[Read More]</a>');
    $(".content").hide();
    $('.toggle-link').click(function (e) {
        e.preventDefault();
        var $link = $(this);

        if ($link.data('expanded') == true) {
            $link.data('expanded', false);
            $link.text('[Read More]');            
        } else {
            $link.data('expanded', true);
            $link.text('[Close]');
        }

        $link.prev(".content").fadeToggle(1000);
    });    

});

Answer 1

在 fadeToggle() 的回调函数之后添加所有显示代码，以确保它完成..

尝试这个

$(document).ready(function () {
$('.content').after('<a href="#" class="toggle-link">[Read More]</a>');
$(".content").hide();
$('.toggle-link').click(function (e) {
    e.preventDefault();
   var $link = $(this);
    $link.text('');  //<---here empty the text so the animation is clear
    $link.prev(".content").fadeToggle(1000,function(){



    if ($link.data('expanded') == true) {
        $link.data('expanded', false);
        $link.text('[Read More]');            
    } else {
        $link.data('expanded', true);
        $link.text('[Close]');
    }
    });
});    

});

在这里摆弄

Answer 2

把它放在fadeToggle回调里面，让它在动画完成后出现。另外，如果您要存储只是为了交换不需要的文本值而扩展。您可以改为使用 .text() 回调函数根据当前文本返回值。

$(document).ready(function () {
    $('.content').after('<a href="#" class="toggle-link">[Read More]</a>');
    $(".content").hide();

    $('.toggle-link').click(function (e) {
        e.preventDefault();
        var $link = $(this);
        $link.prev(".content").fadeToggle(1000, function () { //Do it here
            var isExpanded = $link.data('expanded'); //Get the expanded value
            $link.text(function (_, text) { //use .text() function to switch value
                return text == "[Read More]" ? "[Close]" : "[Read More]"; 
            });
            $link.data('expanded', !isExpanded); //Dont need this if you are using this only  for expand collapse text switching.

        });
    });

});

演示

Answer 3

How about
$link.prev(".content").fadeToggle(1000, function(){
    //code to fade read more link in
});