효과와 함께 추가를 사용하여 jQuery

다음 .append()과 같은 효과와 함께 사용하는 방법show('slow')

에 영향을 미치는 append것은 전혀 작동하지 않는 것 같으며 normal과 동일한 결과를 제공합니다 show(). 전환이나 애니메이션이 없습니다.

어떻게 다른 하나 개의 사업부를 추가하고, 할 수 있습니다 slideDown또는 show('slow')그것에 영향을?

div가 추가 되 자마자 브라우저에 표시되는 내용이 업데이트되므로 추가 효과가 작동하지 않습니다. 따라서 Mark B와 Steerpike의 답변을 결합하려면 다음을 수행하십시오.

실제로 추가하기 전에 추가하려는 div의 스타일을 숨김으로 지정하십시오. 인라인 또는 외부 CSS 스크립트를 사용하거나 div를 다음과 같이 만들 수 있습니다.

<div id="new_div" style="display: none;"> ... </div>

그런 다음 추가 효과 ( demo )에 효과를 연결할 수 있습니다 .

$('#new_div').appendTo('#original_div').show('slow');

또는 ( 데모 ) :

var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');

본질은 이것입니다 :

1. 부모님에게 '추가'를 부르고 있습니다.
2. 하지만 당신은 새로운 아이에 '쇼'를 호출하고 싶어

이것은 나를 위해 작동합니다 :

var new_item = $('<p>hello</p>').hide();
parent.append(new_item);
new_item.show('normal');

또는:

$('<p>hello</p>').hide().appendTo(parent).show('normal');

들어오는 데이터로 작업 할 때의 다른 방법 (아약스 호출과 같은) :

var new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();

다음과 같은 것 :

$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow');

해야합니까?

편집 : 죄송합니다, 코드에 실수가 있으며 Matt의 제안도 기내에 올라갔습니다.

당신이 사업부에 추가되면, 그것을 숨길 하고 보여 인수와 함께 "slow".

$("#img_container").append(first_div).hide().show('slow');

추가 된 div가 css를 통해 초기에 숨겨 지도록 설정하십시오 visibility:hidden.

비슷한 종류의 솔루션이 필요했고 페이스 북과 같은 벽에 데이터를 추가하고 싶을 때 게시 할 때 prepend()최신 게시물을 추가하는 데 사용하면 다른 사람들에게 유용 할 수 있다고 생각했습니다.

$("#statusupdate").submit( function () {    
          $.post(
           'ajax.php',
            $(this).serialize(),
            function(data){

                $("#box").prepend($(data).fadeIn('slow'));                  
                $("#status").val('');
            }
          );
           event.preventDefault();   
        });   

ajax.php의 코드는

if (isset($_POST))
{

    $feed = $_POST['feed'];
    echo "<p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>";


}

다음과 같이 간단히 숨기고, 추가하고, 보여주십시오.

<div id="parent1" style="  width: 300px; height: 300px; background-color: yellow;">
    <div id="child" style=" width: 100px; height: 100px; background-color: red;"></div>
</div>


<div id="parent2" style="  width: 300px; height: 300px; background-color: green;">
</div>

<input id="mybutton" type="button" value="move">

<script>
    $("#mybutton").click(function(){
        $('#child').hide(1000, function(){
            $('#parent2').append($('#child'));
            $('#child').show(1000);
        });

    });
</script>

애니메이션을 사용하면 부드럽게 표시 할 수 있습니다. 스타일에 "애니메이션 : show 1s"를 추가하면 전체 모양이 키 프레임으로 구분됩니다.

나의 경우에는:

$("div.which-stores-content").append("<div class="content">Content</div>);
$("div.content").hide().show("fast");

가시성 : 숨김-> 가시성 : 표시로 CSS를 조정할 수 있고 전환 등을 조정합니다. 전환 : 가시성 1.0s;