Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Сворачивающийся текст с обтеканием. (https://javascript.ru/forum/misc/64896-svorachivayushhijjsya-tekst-s-obtekaniem.html)

mbrogan 12.09.2016 15:44

Сворачивающийся текст с обтеканием.
 
Добрый вечер.
Хочу сделать описание, которое будет разворачиваться в полный объем и обтекать картинку. Но javaScript не хочет делать это вместе. После выполнения замены стилей, обратное действие в блоке else выполняется только для изменения height, а overflow обратно в hidden не хочет уходить. Прошу помощи :help:
(function () {
      var flag = true;

    $("button").click(function () {
      if (flag) {
	  
        var height = $("#tab-description").css("height", "auto").height();
	    var overflow = $("#tab-description").css("overflow", "visible");
		
         $("#tab-description").css("height", "95px")
         $("#tab-description").animate({"height": height});
		 
		 $("#tab-description").css("overflow", "hidden")
         $("#tab-description").animate({"overflow": overflow}); 
		
		 } 
		 
		if(!flag)
		 {

         $("#tab-description").animate({"height": "95px"});
		 $("#tab-description").animate({"overflow": "hidden"}); 

		 }
   
flag = !flag;
});
   })()

рони 12.09.2016 17:04

mbrogan,
animate предназначено только для цифровых значений

mbrogan 12.09.2016 17:14

Цитата:

Сообщение от рони (Сообщение 428493)
mbrogan,
animate предназначено только для цифровых значений

Но он же выполняет animate при выполнении условия

рони 12.09.2016 17:21

Цитата:

Сообщение от mbrogan
Но он же выполняет animate при выполнении условия

в строках 14 и 22 написан бред, особенно в 14, но jquery сделано так что способно выдержать ещё не такую ересь и не свалится в аут.

рони 12.09.2016 17:26

mbrogan,
попробуйте сделать через .toggleClass() используя только css

mbrogan 12.09.2016 18:18

Цитата:

Сообщение от рони (Сообщение 428498)
mbrogan,
попробуйте сделать через .toggleClass() используя только css

Спасибо, все решилось, таким образом:
(function () {
      var flag = true;

    $("button").click(function () {
      if (flag) {
	  
        var height = $("#tab-description").css("height", "auto").height();
	    var overflow = $("#tab-description").css("overflow", "visible");
		
         $("#tab-description").css("height", "106px")
         $("#tab-description").animate({"height": height});
		 
 
		document.getElementById('tab-description').style.overflow = 'visible';
		 } 
		 
		else
		 {
 document.getElementById('tab-description').style.overflow = 'hidden';
         $("#tab-description").animate({"height": "106px"});

		 }
   
flag = !flag;
});
   })()


Причем пришлось переставлять местами
document.getElementById('tab-description').style.overflow = 'hidden';
         $("#tab-description").animate({"height": "106px"});

почему то не хотел работать.

рони 12.09.2016 18:38

Цитата:

Сообщение от mbrogan
document.getElementById('tab-description').style.overflow = 'visible';

$("#tab-description").css("overflow", "visible");

если пишите на jquery не мешайте с js, по желанию.

mbrogan 12.09.2016 20:14

Цитата:

Сообщение от рони (Сообщение 428504)
$("#tab-description").css("overflow", "visible");

если пишите на jquery не мешайте с js, по желанию.

Благодарю за совет


Часовой пояс GMT +3, время: 22:46.