Question

我正在创建一些滑动面板（手风琴），我想滑动背景图像，以便始终显示一块背景。我有动画面板的问题，但CSS工作正常。 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});
}

不起作用，但如果我在css而不是animate中替换它就可以了。

我正在尝试访问HTML <div class="panels-background heading">。

javascript改编自liteAccordion。

jsFiddle：http://jsfiddle.net/beaverusiv/GGd38/4/在相关区域的javascript中搜索“CODE”。

Answer 1

问题就在您正在调用的代码块下面：

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

当您致电.stop()时，它会停止您之前尝试呼叫的高度动画。

Answer 2

我曾经遇到过类似的问题;当使用jQuery时，似乎动画属性不会像提议的那样起作用。有一点研究，只是预感添加了jQuery UI库。它奏效了。最后，我包含了jQuery UI Effect库文件，它就像地狱一样。

在文档（http://docs.jquery.com/UI/Effects/animate）上，它说UI效果库扩展了动画功能以支持颜色，但对我来说它也有助于高度动画。不知道为什么..

要下载此goto http://jqueryui.com/download，请在底部选择Core和UI效果。保持休息未选中（如果您想在8kb左右的文件中收到解决方案）。然后您将收到一个zip文件作为下载。

在这个zip中，转到js目录;选择名称类似于jquery-ui-1.8.18.custom.min.js的文件，并在页面中包含该文件。我认为这样做。再次你可以添加更酷的效果，如幻灯片，盒子，爆炸等。我猜你不需要进一步的说明.. gud day :)）

jQuery animate（）不起作用，但css（）可以

2 个答案: