CODEWITHSUNDEEP
jqueryjquery-animate
BeaverusIV
BeaverusIV

Reputation: 1008

jQuery animate() doesn't work, but css() does

I am creating some sliding panels (accordion) and I want to slide the background image so that a piece of the background is always showing. I am having problems animating the panels, but css works fine. e.g.:

if(slideIndex == index) {
    $this.children('.heading').children().children().fadeIn(settings.slideSpeed);
    $this.children('.heading').animate({height: 250});
} else {
    $this.children('.heading').children().children().not('.panel-strip').fadeOut(settings.slideSpeed);
    $this.children('.heading').animate({height: 500});
}

Doesn't work, but if I substitute in css instead of animate it works.

The HTML is <div class="panels-background heading"> that I am trying to access.

The javascript is adapted from liteAccordion.

jsFiddle: http://jsfiddle.net/beaverusiv/GGd38/4/ search for 'CODE' in the javascript for the pertinent area.

Upvotes: 0

Views: 3252

Answers (2)

Mrigesh Raj Shrestha
Mrigesh Raj Shrestha

Reputation: 620

I had similar problem once; it seemed animate property wont function as proposed when using just jQuery. Had a little research, added jQuery UI library just by hunch. And it worked. At the end, I included jQuery UI Effect library file and it worked like hell.

At documentation(http://docs.jquery.com/UI/Effects/animate) it says that UI effect library extends animate function to support colors but for me it helped in height animation too. dunno why..

For downloading this goto http://jqueryui.com/download choose Core and UI effects at bottom. Leave rest unchecked(if you want to recieve solution in just around 8kb file). Then you will recieve a zip file as a download.

In this zip, goto js directory; pick the file with name something like jquery-ui-1.8.18.custom.min.js and include that in your page. I think this will do. again you get to add cooler effects like slide,box, explode etc.. I guess you dont need further instructions.. gud day :)

Upvotes: 1

Mike Lentini
Mike Lentini

Reputation: 1358

The problem is right below that code block where you are calling:

$this
     .children('.heading')
     .stop(true)
     .animate({
          left : (side ? 0 : slideWidth) + slideIndex * settings.headerWidth
      }, 
     settings.slideSpeed, 
     settings.easing,
     function() { 
         // flag ensures that fn is only called one time per triggerSlide
         if (!core.slideAnimCompleteFlag) {
             settings.onSlideAnimComplete.call(next);
             core.slideAnimCompleteFlag = true;
         }
     });

When you call .stop() it is stopping the height animation that you are trying to call before.

Upvotes: 2

Related Questions