jQuery로 인라인 요소를 애니메이션합니다

StackOverflow https://stackoverflow.com/questions/231937

  •  04-07-2019
  •  | 
  •  

문제

jQuery를 사용하여 인라인 요소 (예 : 범위)를 보여주고 숨기려고합니다.

Toggle () 만 사용하면 예상대로 작동하지만 토글 ( "slow")을 사용하여 애니메이션을 제공하면 스팬을 블록 요소로 바꾸어 브레이크를 삽입합니다.

인라인 요소로 애니메이션이 가능합니까? 나는 페이드 인이 아닌 부드러운 슬라이딩을 선호합니다.

<script type="text/javascript">
    $(function(){
        $('.toggle').click(function() { $('.hide').toggle("slow") });
    });
</script>
<p>Hello <span class="hide">there</span> jquery</p>
<button class="toggle">Toggle</button>
도움이 되었습니까?

해결책

toggle() 때때로 이상한 요소를 숨기거나 변형시키는 등 이상한 것들이 있습니다. 비슷한 해결책은 다음과 같습니다.

$('.toggle').click(function() {
  $('.hide').animate({
    'opacity' : 'toggle',
  });
});

편집하다: 추가 HTML 마크 업으로 매끄러운 슬라이딩을 추가하는 방법이 있습니다.

var hidepos = $('.hide').offset().left;
var slidepos = $('.slide').offset().left;

$('.toggle').click(function() {
    var goto = ($('.slide').offset().left < slidepos) ? slidepos : hidepos;

    $('.slide').css({
        'left' : $('.slide').offset().left,
        'position' : 'fixed',
    }).animate({
        'left' : goto,
    }, function() {
        $(this).css('position', 'static');
    });

    $('.hide').animate({
        'opacity' : 'toggle',
    });
});

HTML :

<p>Hello <span class="hide">there</span> <span class="slide">jquery</span></p>
<button class="toggle">Toggle</button>

다른 팁

하나의 CSS-Property만이 당신을 행복하게 할 것입니다. http://terion-fallen.livejournal.com/332945.html

#animated-element { display: inline-block!important }

나는 그것이 그렇게 가능하다고 생각하지 않습니다. 내가 생각할 수있는 유일한 방법은 0과 1 사이의 불투명도를 애니메이션하고 애니메이션의 콜백을 사용하여 켜거나 끄는 것입니다.

$('.toggle').click(function() {
    $('.hide:visible').animate(
        {opacity : 0},
        function() { $(this).hide(); }
    );
    $('.hide:hidden')
        .show()
        .animate({opacity : 1})
    ;
});

다른 답변이 보여 주듯이, 페이딩이 가능합니다. 그러나 나는 "매끄러운 슬라이딩"이 될 것이라고 생각하지 않습니다. 간단히 말해서, 요소의 특정 속성은 애니메이션해야합니다. 언급 한 인라인 범위는 비록 비록 비록 비록 비록 높이 또는 너비가 없습니다.

나는 당신이 원하는 것이 디스플레이 될 때까지 가능하다고 생각하지 않습니다 : 인라인-블록은 브라우저에서 잘 지원됩니다. 지금은 배경을 빨간색으로 사라지고 요소를 숨길 것이라고 생각합니다.

디스플레이 인 경우 : 인라인 블록이 잘 지원 된 경우 스타일을 인라인 블록으로 변경 한 다음 너비 나 높이를 애니메이션 할 수 있지만 불행히도 요즘에는 잘 작동하지 않습니다. 어쩌면 2010 년 :)

'애니메이션'이 블록 요소로 애니메이션을 바꾸는 것이 왼쪽이나 오른쪽을 슬라이드하려는 것이 플로트와 함께 위치되면 문제가되지 않습니다.

 $('#pnlPopup #btnUpdateButton').assertOne().animate({ width: "toggle" });

#BTNUPDATEBUTTON이 다음과 같은 스타일이 있다면 꽤 잘 미끄러 져 내용을 오른쪽으로 밀어 넣습니다.

#btnUpdateButton {
    float: left;
    margin-right: 5px;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top