Question

我必须做一个动画，其中图像应该移动到点击的特定点，在这个中间，我必须缩放图像，最后它将保持其大小。例如：

if div height = 100 and width = 100 then ,
in starting of animation it will be 100*100 
in middle of animation it will be 120* 120
in last of animation it will be 100*100

这是我试过的，这是做部分的一半但不是我想要的

<!DOCTYPE html>
<head>
<meta charset="utf-8">

<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">


<script src="js/jquery.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">       </script> 
<style type="text/css">
    .logo{width:116px; height:116px; position:relative;border:1px solid black;  }
</style> 
<script>
$(document).ready(function(){
    $(".logo").click(function(){
        // $(".logo").css("-webkit-transition","width 2s ease, height 2s ease"); 
        // $(".logo").css("-moz-transition","width 2s ease, height 2s ease"); 
        // $(".logo").css("-o-transition","width 2s ease, height 2s ease"); 
        // $(".logo").css("transition","width 2s ease, height 2s ease"); 

        $(".logo").animate({height:'326px', 
               width:'326px', 
                       left:'250px',
                       top:'250px'},5000,"easeInOutSine",function() {
             $( this ).after( "<div>Animation complete.</div>" );
        });
    });
});
</script>
</head>
<body>
    <img src="img/coke.png" class="logo"/>

</body>
</html>

Answer 1

请测试这个脚本，因为你没有提供小提琴而我懒得为你创建一个

$(".logo").animate({
    left:'250px',
    top:'250px'},
    { 
      queue: false,
      duration: 3000
    },"easeInOutSine",function() {
        $( this ).after( "<div>move complete.</div>" );
});

$(".logo").animate({
    height:'326px', 
    width:'326px', 
    { 
      queue: false,
      duration: 1500
    },"easeInOutSine",function() {
        $( this ).after( "<div>expand complete.</div>" );
}).animate({
     height:'110px', 
     width:'110px', 
     { 
       queue: false,
       duration: 1500
     },"easeInOutSine",function() {
        $( this ).after( "<div>contract complete.</div>" );
});

看看@ http://api.jquery.com/animate/并查看queue：false

动画用于在中间jquery中缩放图像

1 个答案: