4
간단한 애니메이션을 만들려고합니다.jQuery UI - addClass removeClass - CSS 값이 고정되어 있습니다.
- div를 표시합니다. 그것은 정확하게 움직입니다.
- div를 숨 깁니다. 옳은.
- div를 다시 표시합니다. 그것은 보여 주지만 애니메이션은 없습니다. 처음 중단했을 때의 가치를 고수합니다.
어쨌든 [add | remove] 클래스에서 발생하는 보간 CSS가 막히게됩니다. 두 번째로, [add | remove] 클래스가 실제로 실행 중이지만, 클래스에서 설정 한 CSS가 무시되고 있습니다 (나는 그림자가있는 것 같음). .animate 및 하드 코딩 된 스타일 값을 사용하지 않고 어떻게 해결할 수 있습니까? 전체 요점은 CSS 클래스에 애니메이션 끝점을 배치하는 것이 었습니다.
감사합니다.
<!doctype html>
<style type="text/css">
div {
width: 400px;
height: 200px;
}
.green {
background-color: green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#show').bind({
click: function() {
showAndRun()
}
})
$('#hide').bind({
click: function() {
$('div').stop(true, false).fadeOut('slow')
}
})
function showAndRun() {
function pulse() {
$('div').removeClass('green', 2000, function() {
$(this).addClass('green', 2000, pulse)
})
}
$('div').stop(true, false).hide().addClass('green').fadeIn('slow', pulse)
}
})
</script>
<input id="show" type="button" value="show" /><input id="hide" type="button" value="hide" />
<div style="display: none;"></div>
당신은 또한 here at jsbin
@Jason은 jsbin에서 추가 한 링크입니다. 맞습니까? 그것은 당신의 묘사 문제 같은데. – Earlz
예, 내 문제를 정확하게 반영합니다. 감사합니다. –