jquery和css3滑块可以朝一个方向工作，但不能朝另一个方向

我现在有了我的代码，允许我把一个项目幻灯片放到左边，然后删除。我的问题是，一旦我删除了那个元素，我就会在屏幕右侧创建另一个元素，一旦原始元素被删除，我想让它滑入。

它现在所做的是，一旦元素被删除，右侧的元素就会出现在中心，而不显示动画。

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

有什么建议吗？

我不认为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/

相关内容

最新更新

热门标签：