Как показать остальную часть текста после нажатия кнопки jQuery?

Question

Добрый день,

Я создал код в 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

Answer 1

Даже если $("#b_1_more").show() выполняется после того, как $("#block").animate(...); скрытый текст отображается до анимации завершения.

Если показать расширенный текст после анимация закончена, там не будет моргать:

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

Fiddle: http://jsfiddle.net/L7dq3zbv/1/

Другим возможным решением является сказать #block элемент не моргать используя css:

white-space: nowrap; 
overflow: hidden; 

Fiddle: http://jsfiddle.net/kzezobgj/1/

Answer 2

Это также можно укоротить, вам даже не нужно противостоять переменной.

использование .toggleClass()

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

Может быть не точной анимации, но может помочь.

Демо http://jsfiddle.net/4je6j9h8/