JQuery - анимировать кнопку - PullRequest
Новая
       29

JQuery - анимировать кнопку

1 голос
/ 19 августа 2009

Я пытаюсь сделать простую кнопку JQuery из div, которая будет менять цвет фона при включении / выключении.

Пока мой код выглядит так: 

<html>
    <head>
        <title>Div Test</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $("div").hover(function() {
                $(this).css({'background-color' : 'yellow'});
            });
        </script>
        <style type="text/css">
            #mainButton {
                color: #FFF;
                width: 100px;
                height: 50px;
                background-color: #333;
            }
        </style>
    </head>
    <body>
        <div id="mainButton">
            <p align="center">Button</p>
        </div>
    </body>
</html>

Однако я не могу заставить его работать. Моя кнопка изначально отображается нормально, но при переворачивании желтый фон отсутствует. : - |

Ответы [ 8 ]

4 голосов
/ 19 августа 2009

Javascript должен быть таким 

$(document).ready(function(){
        $("div").hover(function() {
            $(this).css('background-color' , 'yellow');
        });
});

и если вы хотите, чтобы кнопка возвращалась к # 333 при выходе из кнопки, вы можете использовать: 

$(document).ready(function(){
    $("div").hover(function() {
            $(this).css('background-color' , 'yellow');

    }, function(){
        $(this).css('background-color' , '#333');
    });

РЕДАКТИРОВАТЬ, чтобы включить анимацию

Это должно оживить цвет фона 

$(document).ready(function(){
    $("div").hover(function() {
            $(this).animate({backgroundColor: 'yellow'}, 1000);
    }, function(){
        $(this).animate({backgroundColor: '#333'}, 1000);
    });

1000 - это как долго вы хотите, чтобы анимация заняла

1 голос
/ 19 августа 2009

Для этого вам не нужен jQuery. Вы можете легко добиться этого с помощью некоторых селекторов псевдо-классов с помощью css. 

DIV#mainButton:hover
{
   background-color: #ffo;
}

DIV#mainButton
{
   background-color: #333;
}
1 голос
/ 19 августа 2009

Чтобы добавить к существующим ответам, ваше решение не работает просто потому, что в DOM нет элемента, который бы даже связывал событие с ним. Предложения используют: 

 $(document).ready(fn)

синтаксис, как описано здесь , чтобы гарантировать, что DOM полностью загружен перед событиями привязки.

1 голос
/ 19 августа 2009

Во-первых, я бы использовал тег <button>, а не тег деления с элементом абзаца внутри. Тег <button> более подходит для того, что вы на самом деле пытаетесь сделать.

Во-вторых, вы неправильно используете функцию jQuery .css. В соответствии с jQuery CSS Documents скрипт должен выглядеть примерно так: 

jQuery(document).ready(function($) {
    $("#mainButton").hover(
        // On hover over
        function() {
            $(this).css('background-color', '#FF0 ');
        }, 

        // On hover out
        function() {
            $(this).css('background-color', '#333');
        }
    );
});
1 голос
/ 19 августа 2009

Функция наведения принимает два параметра: 

        $("div").hover(function() {
            $(this).css({'background-color' : 'yellow'}); //mouse in
        }, function(){
           $(this).css({'background-color' : 'green'});}); //mouse out

здесь вы можете найти более подробную информацию.

1 голос
/ 19 августа 2009

Похоже, вам не хватает стандартной функции jQuery «ждать готовности страницы» вокруг вашего кода. 

 $(document).ready(function(){
   // Your code here
 });

и вам нужно только {} в вашей функции css, если вы изменяете более одной пары ключ / значение.

0 голосов
/ 19 августа 2009

Пара синтаксических ошибок и отсутствующий готов () ... 

<script type="text/javascript">
    $(document).ready(function() {

        $("div").hover(function() {
            $(this).css('background-color', 'yellow');
        });
    });
</script>
0 голосов
/ 19 августа 2009

Вам не хватает $ (document) .ready (function () {}), и вы неправильно используете функцию css. 

$(document).ready(function(){

     $("div").hover(function() {

                $(this).css('background-color','yellow');
            });
      });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...