CODEWITHSUNDEEP
jqueryscrollduration
mcranston18
mcranston18

Reputation: 4790

jQuery Animate Method -- duration isn't working

I have a jQuery scroll set up, but the duration is not working properly. On a the "About Page" of a Wordpress site, I want to use jQuery so that upon click of a photo, it scrolls down to the appropriate div. The scroll is working, however, the duration is not. The scroll takes about 1/4 a second and it doesn't matter at what speed I set the duration. The site I'm referring can be seen at: http://teamcoding.ca/corporate/about-test/

Below is the source code for the jQuery scroll.

$(function(){
    $('a[href*=.staff_photos_indiv]').click(function() {
        if (location.pathname.replace(/^\//,") == this.pathname.replace(/^\//,") && location.hostname == this.hostname) {
            var $target = $target;
            $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, {easing:'easeInOutExpo',duration:1600});
                return false;
            }
        }
    }); 
});

Upvotes: 0

Views: 6482

Answers (3)

jfriend00
jfriend00

Reputation: 707466

My guess would be that you don't have the 'easeInOutExpo' easing function defined because the general operation works with this code:

$(document.body).animate(
    {scrollTop: "400px"}, {easing: "swing", duration: 1600}
);

And, you can see it work here: http://jsfiddle.net/jfriend00/UbnUh/

Upvotes: 3

WojtekT
WojtekT

Reputation: 4775

You have an error in jQuery selector.

Uncaught Error: Syntax error, unrecognized expression: [href*=.staff_photos_indiv]

That's why click event is not even firing. What you see is just a href="#... acting in normal way.

Upvotes: 0

hagope
hagope

Reputation: 5531

The way to debug this is to open the page in chrome, right click and select "Inspect Element" the last menu choice.

Choose the last tab on the right, console, and you'll see if any errors exist in JavaScript:

Uncaught Error: Syntax error, unrecognized expression: [href*=.staff_photos_indiv]

Instead, try a simpler selector:

$('.staff_photos_indiv').click( ...

Upvotes: 0

Related Questions