如何用jQuery點擊後顯示文本的其餘部分？

我在jQuery中創建了一個代碼，其中顯示的只是第一個單詞，點擊之後顯示其餘的文本。但是在這段文字顯示時，我有一個'閃爍的效應'。你知道如何改正它嗎？謝謝。

代碼

var clicks = 0; 
$('#block').click(function(){ 
    if(clicks === 0){ 
     $("#block").animate({width: "300px"}); 
     $("#b_1_more").show(); 
     clicks++; 
    }else{ 
     $("#block").animate({width: "50px"}); 
     $("#b_1_more").hide(); 
     clicks = 0; 
    } 
});

DEMO

來源

2015-04-02 1001001

你點擊的那一刻，已經被顯示的全文，但它是在當時該地區仍是一條線太小了。這就是爲什麼你看到了「閃爍」的效果，這實際上是你的元素暫時將文本擴展到第二行。 – 2015-04-02 09:00:17

http://jsfiddle.net/mnLth3gj/ – Satpal 2015-04-02 09:01:05

$("#block").animate(...);後的動畫完成之前顯示隱藏的文本即使$("#b_1_more").show()執行。

如果顯示擴展的文本後的動畫完成後，不會有閃爍：

$("#block").animate({width: "300px"}, function() { 
    $("#b_1_more").show(); 
});

小提琴：http://jsfiddle.net/L7dq3zbv/1/

另一種可能的解決方案是告訴#block元素不眨眼使用css：

white-space: nowrap; 
overflow: hidden;

小提琴：http://jsfiddle.net/kzezobgj/1/

來源

2015-04-02 08:59:48

這也可以縮短，你甚至不需要與變量對抗。

使用.toggleClass()

$(document).ready(function(){ 
    $('#block').click(function(){ 
     $('#block').toggleClass('toggleWidth linear') 
     $("#b_1_more").toggle(); 
    }); 
});

可能是不準確的動畫，但可以提供幫助。

人口統計學http://jsfiddle.net/4je6j9h8/

來源

2015-04-02 09:28:41 Manoj

如何用jQuery點擊後顯示文本的其餘部分？

回答

相關問題