CODEWITHSUNDEEP
jquery
hronikata
hronikata

Reputation: 137

Images tremble on animate

I wrote a little script to animate elements of a list on mousewheel scroll

HTML

<div id="scroll">
    <ul>
        <li style="background-image: url('http://i.imgur.com/egMFpfq.jpg')"></li>
        <li style="background-image: url('http://i.imgur.com/qjmCv5g.jpg')"></li>
        <li style="background-image: url('http://i.imgur.com/egMFpfq.jpg')"></li>
        <li style="background-image: url('http://i.imgur.com/qjmCv5g.jpg')"></li>
        <li style="background-image: url('http://i.imgur.com/egMFpfq.jpg')"></li>
    </ul>
</div>

jQuery

$.fn.scroll = function () {
var $this = $(this);
var $list = $(this).find('ul');
var $lis = $list.find('li');
var count = $lis.length;
var direction,
currentSlidePosition;

$this.addClass('scroll');
$list.addClass('slides-list');
$lis.addClass('slide');
$lis.filter(':first').addClass('current');
$lis.filter(':not(:first)').addClass('past');

var scrollHeight = $lis.eq(0).height();

function gotoSlide(direction) {
    currentSlidePosition = $lis.filter('.current').index();

    if ((direction === 1 && currentSlidePosition === 0) || (direction === -1 && currentSlidePosition === count - 1)) {
        return;
    }

    $lis.removeClass('current');
    $lis.eq(currentSlidePosition - direction).removeClass('past prev').addClass('current');
    $lis.filter('.current').prevAll().addClass('prev');
    $lis.filter('.current').nextAll().addClass('past');
    console.log($list.scrollTop())
    $list.animate({
        scrollTop: (direction === -1) ? $list.scrollTop()+scrollHeight : $list.scrollTop()-scrollHeight
    }, {
        duration: 600
    });
}

$this.on('mouseenter', function () {
    var $this = $(this);

    $this.bind('mousewheel', function (e) {
        if ($list.is(':animated')) {

            return;
        }

        if (e.originalEvent.wheelDelta > 0) {
            direction = 1; //up
        } else {                
            direction = -1; //down
        }

        gotoSlide(direction);
    });
});
};

$(document).ready(function () {
    $('#scroll').scroll();
});

http://jsfiddle.net/m5unj2wu/15/

but on every scroll background images tremble and twitch and it looks ugly. Is there any way to fix it?

Upvotes: 2

Views: 126

Answers (3)

CupawnTae
CupawnTae

Reputation: 14580

Your scrolling is competing with the browser's own scrolling, so you need to tell it not to attempt to scroll itself. You can achieve this with event.preventDefault() in your event handler:

$this.bind('mousewheel', function (e) {
   e.preventDefault();

Note that even though older IE versions don't natively support preventDefault(), jQuery provides this function for you on those browsers, so this is cross-browser safe.

http://jsfiddle.net/m5unj2wu/17/

Upvotes: 2

Miguel
Miguel

Reputation: 20633

return false

   $this.bind('mousewheel', function (e) {
        if ($list.is(':animated')) {
            return false;
        }
        ...
        return false;
    });

http://jsfiddle.net/m5unj2wu/21/

return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation.

Upvotes: 3

Parag Bhayani
Parag Bhayani

Reputation: 3330

Just add this code above your function and it will work

$('#scroll').bind('mousewheel DOMMouseScroll', function() {
    return false
});

This flickering is happening because you are registering your function on div on scroll event, so When you mouse scroll on element it does 2 thing 1) Calls your function 2) Scrolls down div which is default browser behaviour

So here we are disabling the browser's default behavior for scrolling the div

See this fiddle

Upvotes: 2

Related Questions