Блог

Главная - Вопросы по программированию - функция .animate() не работает (jQuery)

функция .animate() не работает (jQuery)

#jquery #html

#jquery #HTML

Вопрос:

Я только начал изучать jQuery и не могу заставить этот код работать. Я думаю, что все в порядке, но это не работает. Кто-нибудь может мне помочь?

HTML:

 <div id="container">

    <ul id="menu">
        <li id="button1">Animar 1</li>
    </ul>

    <div id="box"></div>

</div><!--Container-->

JQUERY:

 $(document).on("ready",main);

function main(){
    $("#button1").on("click", animate1);
}

function animate1(){
    $("#box").animate({
        width: '100px'
    });
}

Редактировать: я также добавил код CSS, так что вы также можете это проверить. Я действительно не знаю, нужно ли это, но вот оно.

CSS:

 body{
    background: #4674A5;
}
#container{
    margin:100px auto;
    width:500px;
}
#caja{
    background: #FF8000;
    width:50px;
    height:50px;
}
#menu{
    padding:0;
    margin: 0;
    text-align: center;
}
#menu li{
    color:white;
    display: inline-block;
    margin: 0;
    list-style: none;
    cursor: pointer;
}
#menu li:hover{
    color:#FF8000;
}

Комментарии:

1. Пожалуйста, всегда учитывайте возможность установки описательного заголовка, соответствующего вашему вопросу…

2. Пожалуйста, рассмотрите возможность редактирования вашего заголовка на что-то более актуальное для вопроса. "My JQuery code doesn't work" никому больше не помогает.

3. пожалуйста, также всегда добавляйте jsfiddle

4. Кроме того факта, что #box он невидим без каких-либо стилей, ваш код , похоже, работает нормально… можете ли вы объяснить, что именно не работает ..?

5. Извините, я уже отредактировал заголовок на более конкретный. Мой английский не так хорош, но я постараюсь объяснить сам. Дело в том, что я использовал jQuery раньше для анимации полосы прокрутки, чтобы страница могла перемещаться. Но я не могу заставить какой-либо код работать сейчас. Я перепробовал все ваши коды, ребята, и ни один из них не работает для меня. Все хорошо обработано, и все атрибуты идентификатора совпадают. Я не загружал ни одного фреймворка jQuery, но я не думаю, что это проблема, поскольку я мог использовать его раньше. Что это может быть?

Ответ №1:

Измените свой код следующим образом

 $(document).ready(function() {
   main();
   function main(){
      $("#button1").on("click", animate1);
   }

   function animate1(){
      $("#box").animate({
         width: '100px'
      });
   }
});

Комментарии:

1. @KingofPopup потому что вы можете привязать псевдообъект готовности с помощью on(), но это не позволит использовать преимущества внутреннего отложенного объекта, используемого для запуска псевдособытия, даже если оно уже запущено

2. Я думаю, что @KingofPopup пытается сказать, что код Op, по крайней мере, работает как есть. Проблема заключается в другом. .on Проблема, по его мнению, вторична.

3. @A.Wolff Извините, честно, я вас не понял. я попробовал это , увидев вопрос, и функция запускается при загрузке. Итак, мой вопрос — как этот ответ исправляет нерабочий код OP ..? что именно в нем не работает ..?

4. @KingofPopup я имел в виду, используя on(), тогда это не сработает (обернуто внутри метода onload): jsfiddle.net/jAx5L/3 Это может быть или не быть проблемой OP здесь, в зависимости от контекста, как / когда вызывается его опубликованный фрагмент. OP наверняка лучше бы улучшил свой вопрос