Question

我有一个div和一个按钮。

点击按钮我附加另一个div。在追加第二个div之后我想将幻灯片添加到第一个div并使用jquery动画方法向下滑动到第二个。

<div class="main">
    <div class="user">
        <div class="closed_div">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>
    <button class="addDiv">Add open Div</button>
</div>

现在我将使用以下代码附加新div

$(document).ready(function(){
            $('.addDiv').click(function(){
                var html = '<div class="open_div">Lorem Ipsum is simply dummy text of the printing and \n\
                        typesetting industry. Lorem Ipsum has been the industrys \n\
                        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type \n\
                        specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining \n\
                        essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, \n\
                        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>';
                $('.user').append(html);
            });
        });

和包含以下代码的动画

$(".closed_div").animate({height:'100%','opacity':1},1500);
$(".open_div").animate({height:0},1500);

但是效果不好。你能告诉我我做错了什么。

Thnakyou。

Answer 1

这是一个使用jQuery slideUp和slideDown函数的实现。我删除了滑动的div。高度：100％是有时动画的问题。

let counter = 0;

$('.addDiv').click(function() {
  var html = $('<div class="closed_div">Lorem Ipsum is simply dummy text of the printing and \n\
                        typesetting industry. Lorem Ipsum has been the industrys \n\
                        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type \n\
                        specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining \n\
                        essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, \n\
                        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.' + counter++ + '</div>');
  $('.user div').slideUp(300, function() {
    $( this ).remove();
  });             
  $('.user').append(html);
  html.slideDown();
  
});

.closed_div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="user">
    <div class="open_div" style="display:none;">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
  <button class="addDiv">Add open Div</button>
</div>

Answer 2

＆＃13;

$(".closed_div").animate({height:'100%','opacity':1},1500);  
  $(function () {
   $('.addDiv').click(function(){
        var elem = $(this);
        $('.user').after('<div class="open_div none">Lorem Ipsum is simply dummy text of the printing and \n\
typesetting industry. Lorem Ipsum has been the industrys \n\
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type \n\
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining \n\
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, \n\
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>').next('div').slideDown('slow');
    });
});

＆＃13;

.none{
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="user">
        <div class="closed_div">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>
    <button class="addDiv">Add open Div</button>
</div>

＆＃13;

Answer 3

您需要将display none属性设置为新添加的mysqli_error(connection); //change it to following mysqli_error($this->link)，将require_once("config.php"); class database { private $link; function __construct() { $this->link = mysqli_connect(config::host,config::username,config::passwor‌d); mysqli_select_db(config::database,$this->link) or die(mysqli_error($this->link)); } function __distruct() { mysqli_close($this->link); }类添加到最后打开的div中。然后使用open_div隐藏最后一个closed_div。在slideUp的回调中，closed_div最后slideUp。

在您的CSS中，您需要将slideDown属性设置为open_div

display: none

open_div

$(document).ready(function(){
            $('.addDiv').click(function(){
                var html = '<div class="open_div">Lorem Ipsum is simply dummy text of the printing and \n\
                        typesetting industry. Lorem Ipsum has been the industrys \n\
                        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type \n\
                        specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining \n\
                        essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, \n\
                        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>';
                $('.open_div:last').addClass('closed_div');
                $('.user').append(html);
                $('.closed_div:last').slideUp("slow", function() {
                	$('.open_div:last').slideDown("slow");
                });
            });
        });

如何在动态元素上添加上滑动画？

3 个答案: