2013-08-09 5 views
-4

У меня есть проблема с функцией animate в jQuery. Я работаю локально, и функция не будет анимировать мой элемент div.Функция анимации JQuery не работает

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $("button").click(function() { 
        $("div").animate({left: '250px'}); 
       }); 

      }); 
     </script>  
    </head> 
    <body> 

     <div style="position:absolute"> Animate Box </div> 
     <button> Start </button> 

    </body> 
</html> 
+0

Работы здесь: http://jsfiddle.net/8rYya /. Если ваш опубликованный код не работает для вас локально, я бы посмотрел, что jQuery действительно загружается, если не пытается загрузить его из локального источника. – Jasper

+0

Вы установили код после того, как мы ответили ... –

+2

Сначала вы задаете вопрос, который не работает, и после того, как мы ответим вам, исправьте код, чтобы он работал -> http://jsfiddle.net/6gae3/1 /! Какая нагрузка быка, помечена! – adeneo

ответ

3

Если вы хотите, чтобы ваше left свойства иметь никакого эффекта, вы должны изменить position свойства вашего дел. Например, вы можете использовать fixed.

+1

Он уже настроен на 'position: absolute' inline на элементе ... – Jasper

+4

@ Jasper Я уверен, что он изменился ... Его здесь не было. OP зафиксировал вопрос после того, как мы ответили ... –

+0

Нет, я не изменяю грамматические ошибки в словах – Jony

5

Анимация работает прекрасно, но элемент не движется, потому что он не имеет никакой позиции или отправную точку:

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      div {position: relative; left:0;} 
     </style> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $("button").click(function() { 
        $("div").animate({left: '250px'}); 
       }); 
      }); 
     </script>  
    </head> 
    <body> 
     <div> Animate Box </div> 
     <button> Start </button> 
    </body> 
</html> 

FIDDLE

+1

. У div есть встроенный атрибут стиля ... Если не установлены свойства 'top/left/right/bottom', браузер будет по умолчанию to 'top: 0; left: 0' ... – Jasper

+0

Но у меня в абзаце тега стиль абсолютный – Jony

+3

@ Jasper - теперь он не сделал, когда я скопировал код – adeneo

Смежные вопросы