j효과 추가를 사용한 jQuery

j효과 추가를 사용한 jQuery

사용방법.append()등의 효과가 있는show('slow')

에 영향을 미침append전혀 효과가 없는 것 같고, 정상적인 결과와 같은 결과를 가져옵니다.show(). 전환도 없고 애니메이션도 없습니다.

어떻게 하면 디브를 다른 디브에 추가할 수 있고, 또 다른 디브를 가질 수 있을까요?slideDown아니면show('slow')영향을 미치는 영향?

브라우저가 표시하는 내용은 디브가 추가되자마자 업데이트되기 때문에 추가에 영향을 미치는 것은 작동하지 않습니다.마크 B와 스티어파이크의 답변을 종합하면 다음과 같습니다.

추가할 디브를 실제로 추가하기 전에 숨겨진 것으로 스타일을 지정합니다.인라인이나 외부 CSS 스크립트로 할 수도 있고, 그냥 디바를 만들 수도 있습니다.

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

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

$('#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');

수신 데이터를 처리할 때의 또 다른 방법(ajax call의 경우와 같이)

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

다음과 같은 경우:

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

해야 합니까?

편집: 죄송합니다, 코드가 잘못되었고 매트의 제안도 그대로 받아들였습니다.

디브에 추가할 때는 숨기고 인수와 함께 보여줍니다."slow".

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

CSS를 통해 처음에 숨겨진 div를 설정합니다.visibility:hidden.

저는 비슷한 종류의 해결책이 필요했습니다. 페이스북과 같은 벽에 데이터를 추가하고 싶었습니다. 게시될 때, 사용합니다.prepend()가장 최근의 게시물을 위에 추가하는 것은 다른 사람들에게 유용할지도 모릅니다.

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

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

ajax.jax의 코드는

if (isset($_POST))
{

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


}

저는 마지막 프로젝트에서 스타일로 요소를 추가한 바로 이러한 필요성을 가지고 있었습니다.display: none;여기에 아이디를 추가했습니다.JQuery의 두번째 줄에서 저는 추가했습니다.$('#myid').show('slow');.

$(document).on('click','#trigger',function(){
  $('#container').append("<label id='newLabel' style='display:none;' class='btn btn-light'>New Element</label>");
  $('#newLabel').show('slow');
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="container" class="btn-group">
  <label class="btn btn-light">Old element</label>
</div>
<button id="trigger" class="btn btn-info">Click to see effect</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

그냥 숨어서 추가하고 보여주면 어떨까요? 이렇게.

<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>

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

나의 경우:

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

가시성으로 CSS를 조정할 수 있습니다:숨김 -> 가시성:전환 등을 조정 및 조정할 수 있습니다: 가시성 1.0s;

언급URL : https://stackoverflow.com/questions/1520178/jquery-using-append-with-effects