jQuery одновременная анимация не работает

У меня есть HTML-страница с двумя элементами div. Один красный, а другой синий. Красный находится в верхнем левом углу, а синий - в верхнем правом углу. У меня есть ссылка «click me», которая при нажатии на нее должна анимироваться. Обе коробки должны двигаться вниз. Это не происходит. Может кто-нибудь сказать мне, почему?jQuery одновременная анимация не работает

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd" 
    > 
<html lang="en"> 
<head> 
    <title>Test</title> 
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script> 
    <style type="text/css"> 
     #box{ 
      background:red; 
      width: 300px; 
      height: 300px; 
      float: left; 
      position: relative; 
     } 
     #box1{ 
      background: blue; 
      width: 300px; 
      height:300px; 
      float: right; 
      position: relative; 
     } 

     a{ 
      position:absolute; 
      top: 310px; 
      left: 550px; 
     } 

    </style> 
    <script type="text/javascript"> 
     $(function(){ 
      $('a').click(function(){ 
       $('#box').animate(function(){bottom : "0px";}, 2000); 
       $('#box1').animate(function(){bottom : "0px";}, 2000); 
       }) 
      }); 
    </script> 
</head> 
<body> 
    <div id="box" ></div> 
    <div id="box1"></div> 
    <br> 
    <a href="#">Click Me!</a> 

</body> 
</html>

источник

2012-06-06 Kaushik Balasubramanain

$('a').click(function(){ 
    $('#box').animate({bottom : 0}, 2000); 
    $('#box1').animate({bottom : 0}, 2000); 
})

Попробуйте это. В вашем коде было несколько синтаксических ошибок.

источник

2012-06-06 21:42:18 ahren

@downvoter - почему ??? – ahren

@ Нил - Да, это так. Вот пример: http://jsfiddle.net/v8hdZ/ – ahren

@ Нил, объясните пожалуйста. Его [jsFiddle работает] (http://jsfiddle.net/v8hdZ/) в конце концов. – Sparky

Попробуйте анимировать их обоих в то же самое время:

$(function(){ 
     $('a').click(function(){ 
      $('#box, #box1').animate({top: "300px"}, 2000); 
     }); 
    });

Кроме того, ваш bottom: 0px ничего не делает, когда нет размера в <body>

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

Демо: http://jsfiddle.net/maniator/fjVpZ/

источник

2012-06-06 21:43:21 Neal

 $(function(){ 
    $('a').click(function(){  
     $('#box,#box1').animate({top:"100%"}, 2000); 
    }); 
});

CSS (абсолютное вместо относительной)

#box{ 
     background:red; 
     width: 100px; 
     height: 300px; 

     position: absolute; 
     top:0; 
    left:0; 
    } 
    #box1{ 
     background: blue; 
     width: 100px; 
     height:300px; 

     position: absolute; 
    top: 0;right:0; 
    } 

    a{ 
     position:absolute; 
     top: 0; 
     left: 550px; 
    }

источник

2012-06-06 22:00:58

Ваш синтаксис является неправильным. Думаю, ты имел в виду это.

function(){ 
    return { bottom: "0px" }; 
}

не

function(){ 
    bottom: "0px"; 
}

Так вот быстро исправить. Изменить этот

$(function(){ 
    $('a').click(function(){ 
     $('#box').animate(function(){bottom : "0px";}, 2000); 
     $('#box1').animate(function(){bottom : "0px";}, 2000); 
    }); 
});

To:

$(function(){ 
    $('a').click(function(){ 
     $('#box, #box1').animate({bottom : "0px" }, 2000); 
    }); 
});

Кроме того, необходимо определенное высоту для document.body поэтому детали могут двигаться.

.animate() апи:

.animate(properties [, duration] [, easing] [, complete])

являются объекты Недвижимость Болгария Недвижимость литералов, а не функции. Пример:

{ body: 1 }

источник

2012-06-06 22:03:51

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd" 
    > 
<html lang="en"> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
     #box{ 
      background:red; 
      width: 300px; 
      height: 300px; 
      float: left; 
      position: absolute; 
     } 
     #box1{ 
      background: blue; 
      width: 300px; 
      height:300px; 
      float: right; 
      position: absolute; 
      right: 0; 
     } 

     a{ 
      position:absolute; 
      top: 310px; 
      left: 550px; 
     } 

    </style> 
    <script type="text/javascript"> 
     $(function(){ 
      $('a').click(function(){ 
       $('#box').animate({bottom : 0}, 2000); 
       $('#box1').animate({bottom : 0}, 2000); 
       }) 
      }); 
    </script> 
</head> 
<body> 
    <div id="box" ></div> 
    <div id="box1"></div> 
    <br> 
    <a href="#">Click Me!</a> 

</body> 
</html>

На JS Fiddle: http://jsfiddle.net/xkizer/yym6s/

источник

2012-06-06 22:05:20 Kizer

Обратите внимание на изменения метода анимации. {bottom: 0} вместо функции() {...} и изменения в CSS. Использование абсолютного позиционирования вместо относительного позиционирования. Вы также можете комбинировать две анимации, как предлагалось @Neal, делая $ ('# box1, # box2'). Animate ({bottom: 0}, 2000); – Kizer

jQuery одновременная анимация не работает

ответ

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