Response title
This is preview!
Animation flickering in Firefox
in Using jQuery
•
8 years ago
So I made an image flipbook animation that reacts to mousedrag. It works fine in safari & ie but not firefox. As I drag the mouse around, the swapping images would flicker. I'm afraid somehow the img or div is being selected causing the flicker so I turned off any selectable attributes. Any insight would be great, thanks.
- (function($){
- $.fn.setframe = function(frame){
- return this.each(function(){
- var $image = $(this);
- function imageName(frame){
- return 'images/inx'+frame+'.png';
- }
- $image.attr('src', imageName(frame));
- });
- };
- })(jQuery);
- $(document).ready(function(){
- var dragDistance = 15;
- var originalX = null;
- var frame = 1;
- $('.cot').mousedown(function(e) {
- e.preventDefault();
- originalX = e.pageX - frame * dragDistance;
- $(document).mousemove(function(e) {
- e.preventDefault();
- frame = Math.floor( ((e.pageX - originalX) / dragDistance) % 35);
- if(frame > 0) {
- $('img.inx').setframe(frame);
- } else {
- $('img.inx').setframe(Math.abs(frame+ 35));
- }
- });
- });
- $(this).mouseup(function() {
- $(document).unbind('mousemove');
- });
- }
- $('img').live('selectstart dragstart', function(evt){ evt.preventDefault(); return false; });
- $('.cot').live('selectstart dragstart', function(evt){ evt.preventDefault(); return false; });
- $('img').disableSelection();
- $('.cot').disableSelection();
- });
- </script>
1