Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Нет плавной анимации до 100% (https://javascript.ru/forum/jquery/18487-net-plavnojj-animacii-do-100%25.html)

lynch1 03.07.2011 08:51

Нет плавной анимации до 100%
 
Часть кода отвечающая за разворачивание и сворачивание:
function hidenm(index) { //Функция скрытия и расскрытия новостей
	bl = $('#news'+index);
	if (bl.height() > maxheight) {
		bl.animate({height:maxheight},500);
		bl.parents('.entry-content').find('.nm_hide_but').text('Развернуть');
		} else {
		bl.animate({height:'100%'},500);
		bl.parents('.entry-content').find('.nm_hide_but').text('Свернуть');
		}
}

maxheight задано в пикселях. Проблема в том, что анимация bl.animate({height:'100%'},500); не проигрывается, а сразу переходит на значение 100%, скрытие блока до заданных размеров работает как нужно.

Как исправить эту проблему? Версия jq на данный момент последняя 1.6.1

Naguwal 03.07.2011 10:25

Юзнув пару раз твой код... пришёл к выводу что метод вызывается раньше или позже его определения. должно быть примерно так

$(document).ready(function()
{
	function hidenm(index) { //Функция скрытия и расскрытия новостей
	    bl = $('#news'+index);
	    if (bl.height() > maxheight) {
	        bl.animate({height:maxheight},500);
	        bl.parents('.entry-content').find('.nm_hide_but').text('Развернуть');
	        } else {
	        bl.animate({height:'100%'},500);
	        bl.parents('.entry-content').find('.nm_hide_but').text('Свернуть');
	        }
	}




$(".news_clic").click(function()
	{   
if(!$("#news").length)
		{
	
hidenm();
}
else 


	
	
	}


		
	
	
	);
	
});

lynch1 03.07.2011 10:53

Ничо не понял... вот весь код:
function hidenm(index) { //Функция скрытия и расскрытия новостей
	bl = $('#news'+index);
	if (bl.height() > maxheight) {
		bl.animate({height:maxheight},500);
		bl.parents('.entry-content').find('.nm_hide_but').text('Развернуть');
		} else {
		bl.animate({height:'100%'},500);
		bl.parents('.entry-content').find('.nm_hide_but').text('Свернуть');
		}
	}

$(document).ready(function(){

	sizes = Array();
	maxheight=200;

	nm = $('.main-content .entry-content'); //находим новость
	nm.each(function(i,el){
		news_mes = $(this).find('.news_message'); //находим текст новости
		if (news_mes.height()>maxheight) { //Если размер большой
			news_mes.css('height',maxheight+'px'); //Уменьшаем
			news_mes.attr('id','news'+i); //Вставляем идентификатор новости
			
			news_mes_data = news_mes.parents('.entry-content').find('.news-info-right'); //Находим место куда вставить кнопку разворачивания
			news_mes_data.prepend('<span class="nm_hide_but" onClick="hidenm('+i+')">Развернуть</span>'); //Вставляем кнопку
			
		}
	});
});

кстати если поставить функцию под документ реди, то при нажатии на развертывание будет ошибка, что функция не определена...почему? Блин либо я туплю либо это тупой бред... Ничо не работает

Naguwal 03.07.2011 12:39

$(document).ready(function(){
var maxheight=200;
var sizes = Array();

function hidenm(index) { //Функция скрытия и расскрытия новостей
 bl = $('#news'+index);
	    if (bl.height() > maxheight) {
	        bl.animate({height:maxheight},500);
	        bl.parents('.entry-content').find('.nm_hide_but').text('Развернуть');
	        } else {
	        bl.animate({height:"100%"},500);
	        bl.parents('.entry-content').find('.nm_hide_but').text('Свернуть');
	        }
	    }
 
	    
	 
	    nm = $('.main-content .entry-content'); //находим новость
	    nm.each(function(i,el){
	        news_mes = $(this).find('.news_message'); //находим текст новости
	        if (news_mes.height()>maxheight) { //Если размер большой
	            news_mes.css('height',maxheight+'px'); //Уменьшаем
	            news_mes.attr('id','news'+i); //Вставляем идентификатор новости
	             
	            news_mes_data = news_mes.parents('.entry-content').find('.news-info-right'); //Находим место куда вставить кнопку разворачивания
	            news_mes_data.prepend('<span class="nm_hide_but">Развернуть</span>'); //Вставляем кнопку

				$(".nm_hide_but").click(function(){
					hidenm('+i+');
				});
	        }
	    });
});

Вроде так...
И метод который ты создаёшь всегда должен быть в
$(document).ready(function(){
function MyMethod()
{
 code ....
}
});

или в
$(function(){

});

lynch1 03.07.2011 13:00

Скопировал ваш код, вместо
news_mes_data.prepend('<span class="nm_hide_but">Развернуть</span>'); //Вставляем кнопку
 
                $(".nm_hide_but").click(function(){
                    hidenm('+i+');
                });

поставил:
news_mes_data.prepend('<span class="nm_hide_but">Развернуть</span>'); //Вставляем кнопку

				news_mes_data.find('.nm_hide_but').click(function(){
					hidenm(i);
				});

Иначе не работает.

Проблема не исчезла - разворачивается по прежнему без анимации до 100%

lynch1 04.07.2011 05:25

Никто не знает с чем это связано? :blink:

lynch1 06.07.2011 10:38

всем спасибо :thanks:


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