我认为这很简单,但我仍然无法让它工作.通过单击一个按钮,我想要一个接一个地发生几个动画- 但现在所有的动画都在同一时间发生.这是我的代码 - 有人可以告诉我哪里出错了吗？:
$(".button").click(function(){
$("#header").animate({top: "-50"}, "slow")
$("#something").animate({height: "hide"}, "slow")
$("ul#menu").animate({top: "20", left: "0"}, "slow")
$(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");
});
我想要在dom中的不同对象上执行几个动画.
我希望它们按顺序发生.
我不想这样做:
$('#first').show(800, function ()
{ $('#second').show(800, function () {...etc...});
我想将所有动画(和cpu密集型函数)添加到某种队列对象中,以确保它们按顺序执行.
所以我可以通过它的中心枢轴很好地扩展div:http://jsfiddle.net/uTDay/
但是,当我在div中添加内容时,转换开始改变:http://jsfiddle.net/uTDay/1/
请注意,它不再从中心缩小.
我也尝试使它消失,因为它开始缩小.fadeOut()/ .fadeTo()/ .animate()但无法使它工作.
基本上,当你点击过滤器选项时,我想要实现的是这种效果 - 它shrink/grow从中心枢轴的方式,同时,fade in/out:http://isotope.metafizzy.co/demos/filtering.html
谢谢.
我正在使用jQuery.crSpline为曲线路径上的图形设置动画.我对结果非常满意.
但是,完整的画布尺寸有意地相当宽 - 绝对比大多数屏幕都大 - 因此图形将很快耗尽视口空间并在屏幕上显示动画效果.
相反,我希望浏览器视口跟随或居中在图像上,以便它保持"镜头".
我将如何使用jQuery进行此操作？scrollTop是一个选项吗？
我已经基于crSpline演示源创建了一个jsFiddle演示,但是具有很宽的minX设置.
我在做什么:
我正在一个有两个不同"侧面"的网站上工作,当你点击左侧时,左侧需要100%.如果单击右侧,则右侧必须为100%.
完成了:
我做了左右两边.并用Jquery制作动画.
问题
单击左侧div时动画正在工作(仅当我添加绝对位置时才有效),但是当我尝试为右侧创建相同的动画时; 它不工作!我创建了一个jsFiddle,所以你可以看到当前的代码:http://jsfiddle.net/sh3Rg/
我无法做出正确的工作.当你点击右边的div; 它需要动画到100%.就像左边一个.
码
您可以在此处查看实时预览和代码:http://jsfiddle.net/sh3Rg/
HTML:
<div id="left"></div>
<div id="right"></div>
JS:
<script>
$('#left').click(function(){
$('#left').animate({width:'100%'}, 2500);
});
</script>
<script>
$('#right').click(function(){
$('#right').animate({width:'100%'}, 2500);
});
</script>
CSS:
html,body {
padding:0;
margin:0;
height:100%;
min-height:100%;
background-color: #000000;
}
p {
cursor: pointer;
color: #FFF;
}
#left {
width: 50%;
height: 100%;
background: #666;
float: left;
cursor: pointer;
position: absolute;
}
#right {
width: 50%;
height: 100%;
background: #063;
float: right;
cursor: pointer;
} …下面的jQuery工作得很好,但是我想在2000年和marginLeft 4000之间使用不透明度.我尝试在元素上做两次动画,但是一个不会开始直到另一个完成.这是我的工作代码:
$('.active-text', $('#message-box')).animate({opacity:1, marginLeft: "60px"}, 4000);
以下是我尝试做的事情以获得理想的效果:
$('.active-text', $('#message-box')).animate({opacity:1}, 2000);
$('.active-text', $('#message-box')).animate({marginLeft: "60px"}, 4000);
下面的脚本不会同时触发slideDown和fadeTo.在滑下完成之前它不会淡入.
<script>
$( document ).ready(function() {
var obj = $("#example");
obj.slideDown(450);
obj.fadeTo(450,1);
});
</script>
如何同时向下滑动对象同时将其淡入？
此外,该对象只是一个普通的div.
我有以下查询.何时使用此:
$('#box').hide(2000).promise().done(function(){
$('#output').text('Box is hidden');
});
而不是这个:
$('#box').hide(2000,function(){
$('#output').text('Box is hidden');
});
使用.promise()jQuery动画方法的一些有用场景是什么？
谢谢