JQuery Animate работает только один раз - PullRequest
Новая
       3

JQuery Animate работает только один раз

1 голос
/ 06 сентября 2011

Привет! Я использую JQuery для анимации двух блоков div на моей странице. Это работает нормально в первый раз, но в последующие раз я просто получаю видимые блоки без каких-либо эффектов анимации. Ниже приведен код, который вызывается кнопкой, называемой buttonx. Спасибо за любую помощь заранее 

$(document).ready(function(){
   // lWhen document loaded 

$("#buttonx").click(function() { DisplayUniDiv( 40,250,300 ) }); 
$('#UniDivHead').click(function() { CloseDiv() }); 
    });



   function DisplayUniDiv(top,width,height,color) { 

dvHead = $('#UniDivHead') ; 
dvBody = $('#UniDivBody') ;     

    // Display the Div Head 
dvHead.css("visibility", "visible");
if (color) { color = "#" + color ; } else { color = "#0066cc"  } ;  
    dvHead.css("background", color ) ;
dvHead.css("top", top + 'px' ); 
dvHead.css("width", width + 'px') ;
    MarginLeft = (width / 2) ; 
    MarginLeft = "-" + MarginLeft ;     
dvHead.css("marginLeft", MarginLeft) 
dvHead.append("Close") ; 

    // Display the body 
dvBody.css("visibility", "visible");
dvBody.css("background", '#CCC' ) ;
    HeadHeight = dvHead.height() ; 
dvBody.css("top", top + HeadHeight + 'px' ); 
dvBody.css("width", width + 'px') ; 
dvBody.css("marginLeft", MarginLeft)    
dvBody.animate({height:height},500);

    }

    function CloseDiv() {
dvHead = $('#UniDivHead') ; 
dvBody = $('#UniDivBody') ;

dvHead.css("visibility", "hidden");
dvBody.css("visibility", "hidden"); 

     }

Ответы [ 3 ]

0 голосов
/ 06 сентября 2011

потому что в функции close вы просто скрываете элемент (здесь: dvBody.css("visibility", "hidden");), но вы должны установить его высоту на 0. вроде: 

dvBody.css({"visibility":"hidden", height:0});
0 голосов
/ 06 сентября 2011

Эта часть работает только один раз: 

if (color) { color = "#" + color ; } else { color = "#0066cc"  } ;  
    dvHead.css("background", color ) ;

Как будет следовать этой последовательности, которая недопустима после первой итерации: 

ABCDEF -> #ABCDEF -> ##ABCDEF -> ###...

Я немного сжал ваш кодПосмотрите, работает ли это: 

$(document).ready(function() {
  $('#buttonx').click(function() {
    DisplayUniDiv(40, 250, 300)
  });

  $('#UniDivHead').click(function() {
    $('#UniDivHead, '#UniDivBody').hide();
  });
});



function DisplayUniDiv(top, width, height, color) {
  $('#UniDivHead').show();

  if (color.index('#') == -1) {
    color = '#' + color;
  } else {
    color = '#0066cc'
  };
  $('#UniDivHead').css('background', color);
  $('#UniDivHead').css('top', top);
  $('#UniDivHead, #UniDivBody').width(width);
  $('#UniDivHead').css('margin-left', MarginLeft)
  $('#UniDivHead').append('<span>Close</span>');

  $('#UniDivBody').show();
  $('#UniDivBody').css('background', '#CCC');
  $('#UniDivBody').css('top', top + $('#UniDivHead').height());
  $('#UniDivBody').css('margin-left', -(width / 2))
  $('#UniDivBody').animate({height: height}, 500);
}

По сути, когда вы скрывали свои элементы, установка visibility: hidden; большую часть времени не работает.jQuery имеет .hide(), который устанавливает display: none;.

0 голосов
/ 06 сентября 2011

Я думаю, это может быть связано с тем, что при первом запуске DisplayUniDiv () он фактически манипулирует размерами и другими факторами, а также делает объекты видимыми.

Когда вы выполняете CloseDiv (), он делает объекты невидимыми.

Когда вы выполняете DisplayUniDiv () во второй раз, он делает объекты видимыми, но все остальные свойства уже находятся в состоянии, к которому вы пытаетесь их анимировать. Анимация все еще «запускается», но не имеет ничего общего.

Если вы хотите иметь видимую 2-ю анимацию, попробуйте сбросить оставшиеся свойства объекта, кроме того, чтобы скрыть их. Это может решить вашу проблему.

...