Question

这是我到目前为止所做的： CodePen

所以动画基本上就是这样;移动到最左边的角落并缩小到100px ..我在缩小部分时遇到问题..是否可以使用jQuery动态缩小backrgound图像？

$(document).ready(function(){
    $("#splash_img").effect("bounce",{distance:10, times: 4 }, 1000);

    $("#splash_img").delay(2000).animate({left:"-=50%", margin:"0px", top:"-=50%"},2000);

    $("#splash_img").animate({width:"100px", height:"100px"},500);

});

Answer 1

您只需添加到#splash_img background-size css属性

#splash_img {

    ....
    background-size:cover;  
}

见下面的代码段

＆＃13;

$(document).ready(function() {
  $("#splash_img").effect("bounce", {
    distance: 10,
    times: 4
  }, 1000);

  $("#splash_img").delay(2000).animate({
    left: "-=50%",
    margin: "0px",
    top: "-=50%"
  }, 2000);

  $("#splash_img").animate({
    width: "100px",
    height: "100px"
  }, 500);

});

＆＃13;

body,
html {
  width: 100%;
  height: 100%;
}

body {
  background: #000;
}

#splash {
  display: table;
  width: 100%;
  height: 100%;
  position: relative;
}

#splash_wrapper {
  display: table-cell;
  vertical-align: center;
}

#splash_img {
  background: url("http://i66.tinypic.com/29wsg7n.png");
  width: 210px;
  height: 210px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -105px;
  margin-left: -105px;
  background-size: cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<section id="splash">
  <div id="slash_wrapper">
    <div id="splash_img"></div>
  </div>
</section>

＆＃13;

需要帮助使用jQuery animate（）来调整背景图像的大小..是否可能？

1 个答案: