jQuery: скользить влево и вправо - PullRequest
Новая
       2

jQuery: скользить влево и вправо

27 голосов
/ 09 марта 2010

Я видел slideUp и slideDown в jQuery. А как насчет функций / способов скольжения влево и вправо?

Ответы [ 4 ]

68 голосов
/ 09 марта 2010

Вы можете сделать это с помощью дополнительных эффектов в jQuery UI: Подробнее см. Здесь

Быстрый пример: 

$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
21 голосов
/ 16 сентября 2012

Если вы не хотите что-то раздутое, например jQuery UI , попробуйте мои собственные анимации: https://github.com/yckart/jquery-custom-animations

Для вас blindLeftToggle и blindRightToggle - подходящий выбор.

http://jsfiddle.net/ARTsinn/65QsU/

5 голосов
/ 30 октября 2013

Вы всегда можете просто использовать jQuery для добавления класса, .addClass или .toggleClass. Тогда вы можете сохранить все свои стили в своем CSS и вне своих скриптов.

http://jsfiddle.net/B8L3x/1/

0 голосов
/ 14 мая 2017

Этот код хорошо работает: 

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(document).ready(function(){
            var options = {};
            $("#c").hide();
            $("#d").hide();
            $("#a").click(function(){
                 $("#c").toggle( "slide", options, 500 );
                 $("#d").hide();
            });
            $("#b").click(function(){
                 $("#d").toggle( "slide", options, 500 );
                 $("#c").hide();
                });
            });
        </script>
        <style>
            nav{
            float:left;
            max-width:300px;
            width:300px;
            margin-top:100px;
            }
            article{
            margin-top:100px; 
            height:100px;
            }
            #c,#d{
            padding:10px;
            border:1px solid olive;
            margin-left:100px;
            margin-top:100px;
            background-color:blue;
            }
            button{
            border:2px solid blue;
            background-color:white;
            color:black;
            padding:10px;
            }
        </style>
    </head>
    <body>
        <header>
            <center>hi</center>
        </header>
        <nav>
            <button id="a">Register 1</button>
            <br>
            <br>
            <br>
            <br>
            <button id="b">Register 2</button>
         </nav>

        <article id="c">
            <form>
                <label>User name:</label>
                <input type="text" name="123" value="something"/>
                <br>
                <br>
                <label>Password:</label>
                <input type="text" name="456" value="something"/>
            </form>
        </article>
        <article id="d">
            <p>Hi</p>
        </article>
    </body>
</html>

Ссылка: W3schools.com и jqueryui.com

Примечание: это пример кода не забудьте добавить все теги скрипта, чтобы обеспечить правильное функционирование кода.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...