Форум

demon407 · #1 (**permalink**) 02.12.2015, 00:28

как сделать, что бы код1 работал также как код2...в первом все понятно, во втором запутанно. Но второй работает, как надо, а первый не совсем. А конкретно вторая обратная анимация стартует не с конца первой а с нулевой позиции(которая была до старта первой анимации)...Заранее спасибо за помощь новичку

код1:

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <script src="jq/jquery-1.11.3.js" type="text/javascript"></script>
</head>
<body>

        <div class="item" id="box"> 
            <img src="images/k1.jpg" height="1330" width="991" alt="zz"/>
        </div>


        <script>    
        

        $(document).ready(function(){
          
        $('img').animate({'zoom':0.5,'right':500},{duration:3000}).delay(2000).animate({'zoom':1,'left':500},{duration:3000});  
          
        });
</script>  
</body>
</html>

код2:

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <script src="jq/jquery-1.11.3.js" type="text/javascript"></script>
    </head>
            <body>

            <div class="item" id="box"> <img src="images/k1.jpg" height="1330" width="991" />

            </div>


    <script>    
         var move = 500;
             zoom = 0.4;
             time = 3000;
    

function Func2()
    {

      $('img').animate({'zoom':0.7,'right':move/3},{duration:time});
    }

function Func1()

    {
      setTimeout (function(){
                    Func2()}, 0);

      $('img').animate({'zoom':zoom,'left':move},{duration:time});
    }

 
$(document).ready(function(){
    Func1();
});  
 

    </script>              
    </body>
</html>

рони · #2 (**permalink**) 02.12.2015, 09:13

demon407,
прочитайте документацию по animate и добавьте вторую анимацию в complete первой
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

demon407 · #3 (**permalink**) 02.12.2015, 21:40

не работает....не понимаю где ошибка

$(document).ready(function(){
          
        $('img').animate({'zoom':0.5,'right':500},{duration:3000},function(){this.animate({'zoom':1,'left':500},{duration:3000});
        });  
            
        });

demon407 · #4 (**permalink**) 02.12.2015, 21:46

и так не работает

$(document).ready(function(){
          
        $('img').animate({'zoom':0.5,'right':500},{duration:3000},{complete:function(){this.animate({'zoom':1,'left':500},{duration:3000});
        }}); 
            
        });

рони · #5 (**permalink**) 02.12.2015, 22:10

demon407,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  img {
    position: absolute;
     cursor: pointer;
     left: 0px;
      zoom: 3;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(window).load(function() {
    $('img').animate({
        'zoom': 0.5,
        'left': 500
    }, {
        duration: 3000,
        complete: function() {
            $(this).animate({
                'zoom': 1,
                'left': 0
            }, {
                duration: 3000
            });
        }
    });



});


  </script>
</head>

<body>

   <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
</body>

</html>

demon407 · #6 (**permalink**) 03.12.2015, 20:57

Спасибо)!...я пробовал, этот код но он не заработал у меня из за таблицы стилей.Благодаря Вам я это сразу увидел.

demon407 · #7 (**permalink**) 03.12.2015, 21:20

если не сложно может еще подскажете почему при выполнении такого кода:

$(window).load(function() {
          
    $('img').animate({'zoom':0.5,'right':500},{duration:3000});
    $('img').animate({'zoom':1,'left':500},{duration:3000});
    $('img').attr("src","images/k2.jpg") ;
     
    });

анимации проигрываются последовательно, а смена атрибута параллельно?
можно ли это сделать так же удобночитаемо, а не писать в "complete:"?

рони · #8 (**permalink**) 03.12.2015, 22:01

demon407,
animate это процесс во времени ... из анимаций формируется очередь ...первый тик анимации выполнился и когда анимация ждёт своего мгновения выполнится снова(спит) браузеру надо чем-то занятся, вот он атрибут и зафигачит

и ещё кучу разных дел ... время подошло (будильник брякнул) сдедующий тик анимации и спит отдыхает или чего полезное делает и т.д
нужно окончание анимаци тогда только complete или callback (что тоже самое, только синтаксис другой)

demon407 · #9 (**permalink**) 03.12.2015, 22:29

смысл кажется уловил...это разные потоки...и анимацию1 и анимацию2 он не делит на разные потоки...получается очередь...а вот атрибут он пихает в отдельный поток и получается параллельно....спасибо

Форум

Справочник

Discord чат

Курсы javascript