Question

我正在尝试在用户点击按钮时创建动态生成的元素。应从右侧滑入，再次单击按钮时，另一个应从右侧滑入。出于某种原因，它并没有完全按照我的需要去做。这是代码：

<html>
<head>
    <title>Chat Head</title>
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script>

    $(document).ready(function(){
        screenWidth = $(window).width();
        screenHeight = $(window).height();
        msgWidth = 0.7*screenWidth;
        msgHeight = 0.7*screenHeight;
        $("#note").css("width", msgWidth);
        $("#note").css("height", msgHeight);

        $("#slide").click(function(){
            var textArea = '<textarea class = form-control rows = "3" id = "text"></textarea>';
            $(textArea).appendTo('.note');
            var effect = 'slide';
            var duration = 1000;
            $(".note").toggle(effect, {direction: 'right'}, duration);
        });
    });

    </script>
</head>
<style type="text/css">
    .note{
        display: none;
    }
</style>
<body>
    <div class="row">
        <div class="col-md-12">
            <button class = "button" id = "slide">Slide</button>
            <hr />
            <div class="note">
            <!-- <textarea class = "form-control" rows = "2" id = "note"></textarea> -->
            </div>
        </div>
    </div>
</body>
</html>

这里是与代码一起使用的JS Fiddle： http://jsfiddle.net/ma6Jq/2/

Answer 1

这是我想出的一个实现。 http://jsfiddle.net/Ar7qw/1/

<script>

$(document).ready(function(){        
    var count = 0;

    $("#slide").click(function(){
        count = count + 1;

        screenWidth = $(window).width();
        screenHeight = $(window).height();
        msgWidth = 0.7*screenWidth;
        msgHeight = 0.7*screenHeight;
        $("#note"+ count).css("width", msgWidth);
        $("#note"+ count).css("height", msgHeight);

        var newnote = '<div class="note' + count +'"></div>';
        $(newnote).appendTo('.col-md-12');

        var textArea = '<textarea class="form-control" rows = "3" id = "text"></textarea>';
        $(textArea).appendTo('.note' + count);

        $('.note' + count).effect('slide', {direction: 'right'}, 1000);

    });
});
</script>

Answer 2

这会让你接近。我现在没时间了。

http://jsfiddle.net/isherwood/ma6Jq/10

.note-box {
    margin-left: 150%;
}
.done {
    margin-left: 10px;
    transition: all 1s;
}


$("#slide").click(function () {
    var textArea = '<textarea class="form-control note-box" rows="3"></textarea>';
    var duration = 1000;

    $(textArea).appendTo('#note').addClass('done', duration);
});

Answer 3

任何需要一个（或几个不同解决方案）的人的另一个实现 http://jsfiddle.net/ma6Jq/13/

var counter = 0;
    $("#slide").click(function () {
        counter ++;
        var textArea = '<div class="note' + counter +  '"><textarea class ="form-control" rows = "3" id = "text">'+ counter +'yo</textarea></div>';

        $(textArea).appendTo('.note');
        var effect = 'slide';
        var duration = 1000;
        var stringhere = ".note" + counter;

$(stringhere).effect('slide',
                         {
                             direction:'right'
                         }, duration);

       /*
        $(stringhere).animate({
            marginLeft: parseInt($(stringhere).css('marginLeft'),1000) == 0 ?
            $(stringhere).outerWidth() :
            100
        });
        */
        /*
        $(stringhere).toggle(effect, {
            direction: 'left'
        }, duration);
        */

    });
});

jQuery：动态HTML onClick

3 个答案: