Javescript JQuery анимации не работает

Я действительно не знаю, что это проблема с одушевленных, и его просто неживой, потому что любой другой эффект, который я пытаюсь проверить, работает хорошо:Javescript JQuery анимации не работает

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
    $("#box1").animate({left: '250px'}); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <title>Title</title> 
 
    <style> 
 
     .box{ 
 
     border: 2px solid black; 
 
     width:100px; 
 
     height: 100px; 
 
     display: inline-block; 
 
     padding: 20px; 
 
     margin: 5px; 
 
     } 
 

 
     p{ 
 
     font-family: Arial; 
 
     color: aquamarine; 
 
     font-size: 30px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <h1 id="he"><center>New website</center></h1> 
 
    <p id="pp">Hey what's up?</p> 
 
    <button id="butt">click here</button> 
 
    <div id="box1" class="box">box9</div> 
 

 
    </body> 
 
</html>

источник

2016-09-07 Niv

Вы не определили какой-либо 'position' attr для вашего' # box1' – vivekkupadhyay

Попробуйте это:

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("#box1").animate({"left": "250px"}); 
    }); 
});

источник

2016-09-07 09:49:41 utdev

Дайте позицию в box и он будет работать.

код ниже:

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    $("#box1").animate({ 
 
     left: '250px' 
 
    }); 
 
    }); 
 
});

.box { 
 
    position: relative; 
 
    border: 2px solid black; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    padding: 20px; 
 
    margin: 5px; 
 
} 
 
p { 
 
    font-family: Arial; 
 
    color: aquamarine; 
 
    font-size: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<h1 id="he"><center>New website</center></h1> 
 
<p id="pp">Hey what's up?</p> 
 
<button id="butt">click here</button> 
 
<div id="box1" class="box">box9</div>

источник

2016-09-07 09:50:23 kukkuz

** + 1 ** @ Иш да его работы, когда я даю ему позицию .. но почему? – Niv

Поскольку атрибуты 'left/right/bottom/top' связаны с положением элемента * DOM *, если вы не определили позицию как' relative/fixed/absolute', то они не оказывают на это никакого влияния и вроде бы бесполезно заявить. – vivekkupadhyay

'left' работает только для элемента« позиционированного », т. Е. Если позиция - это что-то другое, кроме' static' (которое по умолчанию по умолчанию) – kukkuz

Попробуйте это:

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("#box1").animate({'left': '250px','position':"absolute"}); 
    }); 
});

источник

2016-09-07 09:52:25 Ish

вашей анимации сделал это неправильно. сначала вы можете указать позицию. поле div должно быть абсолютным положением. то левое значение должно быть 0.

здесь код css :.

.box{ 
     border: 2px solid black; 
     width:100px; 
     height: 100px; 
     display: inline-block; 
     padding: 20px; 
     margin: 5px; 
     position:absolute; 
     left:0; 
    }

Теперь вы попробуете его оживить.

источник

2016-09-07 09:53:20 bala

Javescript JQuery анимации не работает

ответ

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