Question

我尝试使用此动画使条形展开90％的窗口宽度，然后在空白时退回。

单击栏侧面时应退回，单击

时展开

这是我的HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Implementar procurar YouTube</title>
        <link rel="stylesheet" href="css/style.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/script_fancy.js"></script>
    </head>
    <body>
        <div id="container">
            <header>
                <h1>Procura<span>Video</span></h1>
                <p>Procura YouTube</p>
            </header>
            <section>
                <form id="search-form" name="search-form" onsubmit="return search()">
                    <div class="fieldcontainer">
                        <input type="search" id="query" class="search-field" placeholder="Search YouTube...">
                        <input type="submit" name="search-btn" id="search-btn" value="">
                    </div>
                </form>

                <ul id="results"></ul>
                <div id="buttons"></div>
            </section>
            <footer>
                <p>Copyright &copy; 2017, DAW  </p>
            </footer>
        </div>
    </body>
</html

＆GT;

这是我的JS

// Searchbar Handler
$(function(){
    var searchField = $('#query');
    var icon = $('#search-btn');

    // Evento focus barra
    $(searchField).on('focus', function(){
        $(this).animate({
            width:'100%'
        },400);
        $(icon).animate({
            right: '10px'
        }, 400);
    });

  // handler para blur. A animação apena occore se o campo ainda não tiver texto
    $(searchField).on('blur', function(){
        if(searchField.val() == ''){
            $(searchField).animate({
                width:'45%'
            },400, function(){});
            $(icon).animate({
                right:'360px'
            },400, function(){});
        }
    });
  //evitar que o form seja submetido da forma tradicional, para um server
    $('#search-form').submit(function(e){ //passar a função para não submeter
        e.preventDefault();
    });
});

Answer 1

另一种无用的jQuery。这是一个包含7行CSS的解决方案。

＆＃13;

#query {
  width: 30%;
  transition: width 0.5s linear;
}

#query:focus {
  width: 90%;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Implementar procurar YouTube</title>
        <link rel="stylesheet" href="css/style.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/script_fancy.js"></script>
    </head>
    <body>
        <div id="container">
            <header>
                <h1>Procura<span>Video</span></h1>
                <p>Procura YouTube</p>
            </header>
            <section>
                <form id="search-form" name="search-form" onsubmit="return search()">
                    <div class="fieldcontainer">
                        <input type="search" id="query" class="search-field" placeholder="Search YouTube...">
                        <input type="submit" name="search-btn" id="search-btn" value="">
                    </div>
                </form>

                <ul id="results"></ul>
                <div id="buttons"></div>
            </section>
            <footer>
                <p>Copyright &copy; 2017, DAW  </p>
            </footer>
        </div>
    </body>
</html>

＆＃13;

无法使用Jquery动画为seach栏设置动画

1 个答案: