動畫中縮放圖像在中間jquery

我必須做一個動畫，其中圖像應該移動到點擊中的特定點，在這中間，我必須放大圖像，最後它將保持其大小。例如：動畫中縮放圖像在中間jquery

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>

來源

2014-01-29 user2750762

請測試這個腳本，你沒有提供小提琴，我懶得爲您創建一個

$(".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>"); 
});

看看@ ，並檢查了隊列：後做虛假

來源

2014-01-29 09:03:27

代碼中的一些修改我得到了我想要的功能感謝 – user2750762

您可以粘貼您的工作代碼作爲答案嗎？這將有助於社區:) –

動畫中縮放圖像在中間jquery

回答

相關問題