Question

我正在尝试为页面加载时创建一个简单的jQuery反弹效果，虽然稍后我会添加延迟，但无论如何，现在反弹效果甚至都不起作用。

这可能是背景图片吗？如果是这样，我做错了什么？

$(window).load(function() {
  $("#circle-arrow").effect("bounce", {
    times: 4,
    distance: 200
  }, 400);
});

#blue {
  background: blue;
  height: 400px;
  width: 100%;
}
#home-arrow {
	width: 100%;
	position: absolute;
	top: 25%;
	z-index: 999;
}
#circle-arrow {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow.png");
  background-repeat: no-repeat;
  height: 100px;
  width: 100px;
  background-size: 100% 100%;
  margin: auto auto;
  position: relative;
  top: 60%;
  cursor: pointer;
}

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<div id="blue">
  <div id="home-arrow">
    <div id="circle-arrow"></div>
  </div>
</div>

Answer 1

使用$(document).ready();代替$(window).load();

https://jsfiddle.net/4b9m0wxh/

Answer 2

为什么不使用CSS3动画而不是jQuery UI Bounce效果？它更清洁，性能更高（特别是在触摸设备上）。

检查这个小提琴：https://jsfiddle.net/zsj9ycwu/

您可以更改延迟（以ms为单位）以满足您的需求。

JS

var delay = 1000, circle = $('#circle-arrow'); 

$(document).ready(function(){
    circle.addClass('bounce-in');
    setTimeout(function(){ circle.removeClass('bounce-in'); },delay);
});

CSS

#circle-arrow {
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition:         all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(0,0);
  -webkit-transform: scale(0,0);
  opacity:0;
}
#circle-arrow.bounce-in{
  transform: scale(1,1);
  -webkit-transform: scale(1,1);
  opacity:1;
}

弹跳效果不起作用。导致它不起作用的背景图像？

2 个答案: