CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paul
Paul

Reputation: 3368

Bounce Effect not working. Background image causing it to not work?

I am trying to create a simple jQuery bounce effect for when the page loads, though later on I will add a delay, but regardless, right now the bounce effect doesn't even work.

Is this possible with a background image? If so, what am I doing wrong?

$(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>

Upvotes: 0

Views: 229

Answers (2)

rorymorris89
rorymorris89

Reputation: 1189

Why not use CSS3 animations instead of jQuery UI Bounce effect? It's much cleaner and will provide much higher performance (especially on touch devices).

Check this fiddle: https://jsfiddle.net/zsj9ycwu/

You can change the delay (specified in ms) to suit your needs.

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;
}

Upvotes: 1

Rochu
Rochu

Reputation: 118

Use $(document).ready(); instead of $(window).load();

https://jsfiddle.net/4b9m0wxh/

Upvotes: 1

Related Questions