Question

我现在有了我的代码，允许我将一个项目滑到视图左侧并删除。我的问题是，一旦我删除了该元素，我就会在屏幕右侧创建另一个元素，我想在原始元素被删除后滑入其中。

它现在正在做的是，一旦元素被删除，右边的元素就会出现在中心而没有动画。

 <!DOCTYPE html>
<html>
    <head>
        <title>Slider View</title>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <style>
            .leftRemove{
                left: -3000px;
            }
            .rightAdd{
                position: relative;
                right: -3000px;
                transition: right 2s;
                -webkit-transition: right 2s;
            }
            .centerFocus{
                position: relative;
                width: 100px;
                height: 100px;
                margin: 0 auto;
                right: 0px;
                background-color: green;
                transition: left 2s;
                -webkit-transition: left 2s;
            }                   

        </style>
        <script>
        $(document).on('click', '#main', function(){
            $('body').append("<div class='rightAdd'>Hello!</div>");
            $( "#main" ).addClass('leftRemove');
            setTimeout(function(){
                $('.leftRemove').remove();
                $('.rightAdd').attr('id', 'main');
                }, 800);
            setTimeout(function(){
                $( "#main" ).removeClass('rightAdd');
                $( "#main" ).addClass('centerFocus');
                }, 1000);
        });
        </script>
    </head>
    <body>
        <div id='main' class='centerFocus'></div>
    </body>
</html>

有什么建议吗？

Answer 1

我不相信right是有效的css属性。要向右移动某些内容，请为left提供正值。我还移动了您附加的hello，以便过渡更顺畅。

试试这个：

        .rightAdd{
            position: relative;
            left: 1000px;
            transition: right 2s;
            -webkit-transition: right 2s;
        }


       $(document).on('click', '#main', function(){
        $( "#main" ).addClass('leftRemove');
        setTimeout(function(){
            $('.leftRemove').remove();
            $('body').append("<div class='rightAdd'>Hello!</div>");
            $('.rightAdd').attr('id', 'main');
            }, 800);
        setTimeout(function(){
            $( "#main" ).removeClass('rightAdd');
            $( "#main" ).addClass('centerFocus');
            }, 1000);
    });

实施例

http://jsfiddle.net/9CGUU/

<强>更新

当我在全屏播放小提琴时，我在屏幕上看到Hello!闪烁。这个更新为我解决了这个问题。

 setTimeout(function(){
            $('.leftRemove').remove();
            $('body').append("<div class='rightAdd'></div>");
            $('.rightAdd').attr('id', 'main');
 }, 800);
 setTimeout(function(){
            $( "#main" ).removeClass('rightAdd');
            $('#main').html('Hello!');
            $( "#main" ).addClass('centerFocus');
 }, 1000);

http://jsfiddle.net/9CGUU/6/

jquery和css3滑块工作方向但不是另一方向

1 个答案: