使用jQuery我正在创建一个基本的"工具提示"动画,以便工具提示将出现在一个小动画中,在该动画中它会淡入视图并垂直移动.

到目前为止我有这个:

$('.tooltip').fadeIn('slow');
$('.tooltip').animate({ top: "-10px" }, 'slow');

这样做或这样做:

$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow');

动画将一次运行一个,首先是淡入淡出,然后是垂直动画.有没有办法让它同时做到这两件事？

我有一个div绝对定位于top: 0px和right: 0px,我想使用jquery .animate()来动画它从它的当前位置到left: 0px.怎么做到这一点？我似乎无法让这个工作:

$("#coolDiv").animate({"left":"0px"}, "slow");

为什么这不起作用,如何实现我想做的事情？

谢谢!!

如果您选择要使用jQuery进行动画处理的类或元素集合:

$('.myElems').animate({....});

然后还使用回调函数,最终会有很多不必要的animate()调用.

var i=1;
$('.myElems').animate({width:'200px'}, 200, function(){
    //do something else
    $('#someOtherElem').animate({opacity:'1'}, 300, function(){        
        if (i>1) console.log('the '+i+'-th waste of resources just finished wasting your resources');
        i++;
    });
});

可以说这只是糟糕的代码和/或设计 - 但是我能做些什么,既避免了许多animate()调用,只有其中一个使用回调,并且需要执行大量不必要的回调并且使用我的代码/预期行为？

理想情况下,我只能编写一个只能运行一次的"一次性"回调 - 否则可能有一种有效的方法来测试某些东西是否已经被jQuery动画了？

示例:http://jsfiddle.net/uzSE6/(警告 - 这将显示大量警报框).

我试图<font id="test" size="7">This Text!</font>使用jQuery的Animate函数为tag()的html部分设置动画,如下所示:

$("#test").delay(1500).animate({text:'The text has now changed!'},500);

但是没有任何反应,它不会改变文本.

我怎样才能做到这一点？谢谢!

我在屏幕顶部有一个10px的条,当点击时,我希望它的动画高度为40px,然后再次点击,动画回到10px.我尝试更改div的id,但它不起作用.我怎么能让这个工作,或者有更好的方法来做到这一点？

身体html:

<div id="topbar-show"></div>

CSS:

#topbar-show { width: 100%; height: 10px; background-color: #000; }
#topbar-hide { width: 100%; height: 40px; background-color: #000; }

JavaScript的:

$(document).ready(function(){
  $("#topbar-show").click(function(){
    $(this).animate({height:40},200).attr('id', 'topbar-hide');
  });
  $("#topbar-hide").click(function(){
    $(this).animate({height:10},200).attr('id', 'topbar-show');
  });
});

我已经设置了一个jQuery UI进度条,但不能使用jQuery动画来为它的值设置动画.关于如何使这项工作的任何想法？

该percentDone变量保存从0到100应该显示多远沿滚动条是数字(这工作正常).

我尝试过几种不同的东西但无济于事.这是我到目前为止所拥有的:

var progressbar = $("#progressbar1").widget();

progressbar.animate({
    value: percentDone
}, 5000, function() {
    console.debug('done animating');
});

请注意,如果我使用"value"方法更新滚动条,它可以正常工作,但它跳转到该值而不是平滑地动画到它:

$("#progressbar1").progressbar('value', percentDone);

这是我想做的事情:

初始显示

---------------------------------------------
|                                           |
|                                           |
|                                           |
|              .span12 #col1                |
|                                           |
|                                           |
|                                           |
|                               [#button]   |
|                                           |
|                                           |
---------------------------------------------

然后当#button被点击时,#col1内容被动画向右滑动到.span3和#col2 .span9动画从左到右(从屏幕外):

按钮单击/动画后

-------------------------------------------------
|                                |              |
|                                |              |
|                                |              |
|              .span9  #col2     | .span3 #col1 |
|                                |              |
|                                |              |
|                                |              |
|                                | [#button]    |
|                                |              |
|                                |              |
-------------------------------------------------

然后反转可能发生到原始状态.

谢谢!

问题是

我正在使用Twitter Bootstrap网格系统.谷歌搜索Twitter Bootstrap column transtions animation和变化没有发现任何东西.我不是一个jquery动画大师,所以我想我会讨论堆栈溢出的那种人. …

我在jsfiddle上有一个脚本:http://jsfiddle.net/kX7b6/

悬停时没有任何反应

在悬停时,我希望绿色框与红色框重叠,边距为-50px.什么都没发生.

动画有效,但不是保证金

为了表明动画本身正在工作,我为动画增加了一个不透明度函数.就我所见,margin-top设置为0px内联.

我有一个列表,我使用ng-repeat迭代:用户可以使用向上箭头和向下箭头图标与列表项进行交互,点击它们我只需更改"列表中元素的顺序" "这就是角度建议改变模型,变化自动反映在视图中.

<div ng-repeat="item in list">
{{item.name}} 
<div class="icon-up-arrow" ng-click="moveUp($index);"></div> 
<div class="icon-down-arrow" ng-click="moveDown($index);"></div>
</div>

moveUp中的逻辑: -

$scope.moveUp= function(position){
 var temp=list[position-1];
 list[position-1]=list[position];
 list[position=temp];
};

上面的代码完全正常,类似的是将项目向下移动的逻辑.但我想解决的问题是如何放动画？我知道angular会自己处理绑定视图和模型,但是有没有办法放入动画,因为在按下向下箭头图标时视图会更新？

我现在终于有了这个工作,但想知道当你将鼠标悬停在主页上的列表项时,我可以如何使用JQuery的动画功能使背景图像变化很好地淡化:

http://www.thebalancedbody.ca/

到目前为止实现这一目标的守则是: -

$("ul#frontpage li#277 a").hover(
    function() {
        $('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/nutrition_background.jpg)');
    },
    function() {
        $('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg)');
    }
);

$("ul#frontpage li#297 a").hover(
    function() {
        $('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/vibration_training.jpg)');
    },
    function() {
        $('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg)');
    }
);

等等

我该如何添加ANIMATE功能呢 - 谢谢!

谢谢

乔纳森