如何用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 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/

答

这也可以缩短，你甚至不需要与变量对抗。

使用.toggleClass()

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

可能是不准确的动画，但可以提供帮助。

人口统计学http://jsfiddle.net/4je6j9h8/

如何用jQuery点击后显示文本的其余部分？

相关推荐