jquery 양식 플러그인을 사용하여 메시지에 애니메이션 응답

Question

jquery 양식 플러그인을 사용하는 데 문제가 있습니다. 사용자가 잘못된 정보를 제출하거나 사용자가 정확한 정보를 입력하면 succes 메시지를 보낼 때 오류/성공을 애니메이션화하려는 설정이있는 양식이 있습니다. 그러나 내 문제는 두 가지입니다. 동일한 페이지에 표시되는 메시지는 현재 사용중인 jquery와 함께 Firefox에서만 작동합니다. 이게 뭐야?

표시 할 때 다른 메시지가 슬라이드로 표시되기를 바라지 만, 지금은보기에 팝업으로 표시됩니다. 어떻게 움직이게 만들 수 있습니까?

$('.message').show("slow"); 

참조 jQuery를 show(speed, [callback])

사이먼이 말한다 : 문제의 페이지는 here

$(document).ready(function() { 
var options = { 
target:  '#alert', 
}; 
$('#myForm').ajaxForm(options); 
}); 

$.fn.clearForm = function() { 
    return this.each(function() { 
    var type = this.type, tag = this.tagName.toLowerCase(); 
    if (tag == 'form') 
     return $(':input',this).clearForm(); 
    if (type == 'text' || type == 'password' || tag == 'textarea') 
     this.value = ''; 
    else if (type == 'checkbox' || type == 'radio') 
     this.checked = false; 
    else if (tag == 'select') 
     this.selectedIndex = -1; 
    }); 
}; 
/*this is my addition to getting the slide into view, but does not work */ 
$('#alert').onsubmit(function() { 
    // This will be called before the form is submitted 
    $('.message').show().animate("slow"); 
}); 


/*$(function() { 
     $('.message').('slow').show('slow'); 
     $('.message').('slow').show('slow').animate({opacit:1.0}, 4000).hide('slow'); 
    $('input').clearForm() 
}); */ 

Answer 1

이 대신 일반 쇼() 일을 시도/숨기기()도 할 수있는 방법은 애니메이션입니다 :

우아한 애니메이션을 사용하고 일치하는 모든 요소보기 n 완료 후 선택적 콜백.

또한 animate()를 잘못 사용하고 있습니다. 작동 시키려면 최소한 CSS 속성을 옵션 집합으로 전달해야합니다. 해당 문서를 참조하십시오

http://docs.jquery.com/Effects/animate

편집 : 난 당신이 내 제안을 사용하는 의미 곳은 다음과 같습니다

$('#alert').onsubmit(function() { 
    // This will be called before the form is submitted 
    $('.message').show("slow"); 
}); 

Answer 2

그래, 문제는 잘못 애니메이션 방식을 활용한다. jquery api docs의 '애니메이션 기능'섹션을 읽어 보시기 바랍니다. 카림의 제안은 아마도 당신이 원하는 것일 수도 있지만, 미끄러짐 같은 것보다 더 정교한 애니메이션을 원한다면 'fadeIn'또는 'animation'메소드를 사용할 수 있습니다. 반 기간 번째 이상에서 항목을 사라질 것이다

$('.message').fadeIn(500); 

: 예를 들어

...

$('.message').animate({opacity:100},500); 

효과적으로 같은 일을 할 것. 이 경우 animate 메서드를 사용하여 시간을 보내는 것은 그리 유용하지 않습니다. 그것은 예를 들어,이 경우에 유용 할 것이다 :

$('.message').animate({opacity:100,width:'100%',height:30},500); 

이 100 %에 메시지를 스트레칭하고 100 % 모든 500 밀리 초에 걸쳐 높이 30 픽셀 및 불투명도입니다 제작하여 표시됩니다.

'높이'및 '너비'애니메이션이 작동하려면 일반적으로 요소가 블록 요소 여야합니다. 잔인한 정교 죄송

... 나는 순간 지루 조금 ...