淡出後延遲$ 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

添加所有dispalying代碼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]'); 
    } 
    }); 
});  

}); 

fiddle here

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. 

     }); 
    }); 

}); 

Demo

Answer 3

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