标签: jquery-animate
如何制作动画404齿轮？
我想制作一个带有几个齿轮的404页面，这些齿轮需要旋转一秒钟左右，然后慢慢停止旋转，最后完全静止。在我看来，这是一个很好的效果，可以让我的访客知道出了问题（机器/齿轮停止工作）。
我想用纯 css 来实现这一点，但无法通过谷歌搜索找到如何做到这一点。我也不知道如何使用 jQuery 来做到这一点。欢迎任何建议，但我仍然更喜欢 css3。
推荐指数
解决办法
查看次数
AngularJs 动画背景颜色/颜色
我一直在尝试使用 AngularJs 指令和控制器在单击时动态设置两种颜色之间的背景动画（到目前为止尚未成功）。
有谁知道如何做到这一点？我一直在尝试存储 currCol （存储为数组 var 推入 ng-class），但后来我无法从 ng-class 检索该值并使用它。
我已将 css 从透明转换为颜色，但我无法弄清楚如何在两个动态颜色变量之间进行转换。任何帮助都会很棒。谢谢。
到目前为止的一些代码：
索引.html
<body ng-app="colourTest">
<div ng-controller="BgCtrl" >
<ion-nav-bar id="bgCont" data-mylo-color="" ng-class="colorVal" animate-On-Change="colorVal" ></ion-nav-bar>
<ion-nav-view animation="slide-left-right">
<button ng-click="test3()">set bg</button>
</ion-nav-view>
</div>
</body>
控制器.js
.controller('BgCtrl', ['$scope', function ($scope) {
$scope.colorPane = 'whiteBg';
$scope.colorVal = '';
var colCount = 0;
var colorArr = ['redBg', 'greenBg', 'blueBg', 'whiteBg'];
var currColor = '';
$scope.test3 = function () {
if (colCount < colorArr.length)
{
$scope.colorVal = colorArr[colCount];
colCount ++;
} else { …推荐指数
解决办法
查看次数
在jQuery中.animate之后,function()调用没有执行的问题
我无法弄清楚为什么function()不执行之后.animate.示例jQuery代码如下:
$('#spotlight_img_' + thisSpotId).css('z-index', zIndex).animate({
bottom: 0
}, {
duration: 500,
queue: true
}, function() {
alert('animation complete');
});
$('#spotlight_img_' + lastSpotId).animate({
bottom: "-400px"
}, {
duration: 0,
queue: true
});
它是第1行中的函数,它在技术上应该包含第2行中的内容.
我需要它如何工作是:
1 -动画$('#spotlight_img_' + thisSpotId)了
2 - 动画$('#spotlight_img_' + lastSpotId)下来.
现在因为第二个动画是0秒长,所以它会在第一个动画完成之前发生.
你可以在这里看到它:http://design.vitalmtb.com/index2.html
我将衷心感谢您的帮助!
推荐指数
解决办法
查看次数
jQuery函数无法正常工作
$("#trigger-1").click(function () {
$("#secondary").animate({ width: 0 });
$("#primary").animate({ width: '100%' });
$("#panel-1").css({ display: "block" }).animate({
height: 200,
width: '100%',
opacity: 1
});
return false;
});
$("#trigger-2").click(function () {
$("#secondary").animate({ width: 0 });
$("#primary").animate({ width: '100%' });
$("#panel-2").css({ display: "block" }).animate({
height: 200,
width: '100%',
opacity: 1
});
return false;
});
$("#return").click(function () {
alert(1);
$("#primary").animate({ width: '60%' });
$("#secondary").animate({ width: '40%' });
$(".panel").animate({
height: 0,
width: 0,
opacity: 0
});
return false;
});
返回不起作用panel-2.请检查这个小提琴:http://jsfiddle.net/HTVXv/
另外,如果有可能重构和减少代码,请指导我. …
推荐指数
解决办法
查看次数
在克隆和删除功能上应用动画
我在我的页面上有克隆和删除功能,我想分别应用slideDown/slideUp动画:
$('#add-item').click(function(){
var divCloned = $('.form-fields:first').clone();
divCloned.insertAfter('.form-fields:last');
return false;
});
$('.remove').live('click', function(){
if(confirm("Are you sure you wish to remove this item?"))
{
$(this).parent().remove();
}
return false;
});
我试过这样做,但要么它不起作用,要么动画非常生涩.任何人都知道如何做到这一点？
推荐指数
解决办法
查看次数
我的第一个jQuery动画完成后,如何才能触发第二个jQuery动画？
我有一个由链接($control1)激活的小动画.单击该按钮时,标题会下降,.area2div显示为fadeIn效果.
有没有办法等到标题下降然后用fadeIn效果显示.area2？使用此代码,两个动画同时运行.
$(document).ready(function(){
$("#control1").toggle(
function() { $("#header").animate({top:0}, 250); $(".area2").fadeIn(550);},
function() { $("#header").animate({top:-82}, 250);$(".area2").fadeOut(550);}
);
});
推荐指数
解决办法
查看次数
jquery animate:改变span颜色不起作用
我有一个班级:cash_warn.我想用jquery动画更改span的颜色,但它不起作用.
我现在拥有的:
$('.cash_warn').animate({ color: "#ff8484" }, 500);
另一方面,这确实可以正常工作,但它没有动画:
$('.cash_warn').css('color',"#ff8484");
HTML:
<div class=" friends-shadow detailreward3 detailreward" style="position:absolute;
height:71px; width:238px; left: 453px; top: 40px; padding:20px; z-index:99; font:
bold 11px Helvetica, Arial, sans-serif;">
<span style=" color:#fff" class="cash_warn">
text
</span>
<br /> <br />
more text
</div>
什么出了什么问题？
推荐指数
解决办法
查看次数
如何使用jQuery为背景图像制作动画
嗨,我正在尝试使用jQuery为背景图像设置动画,我尝试在这里使用本教程,但是我的测试页面没有运气,我看到了蓝色的Facebook图标,但鼠标悬停在它上面并没有动画向上显示灰色的标志.请帮忙!谢谢,我是一个jQuery noob.
我的测试页面: http ://leongaban.com/_stack/bg_animation/
Facebook图标应向上动画,完整图片如下:
我的CSS
<style>
#facebook_icon li {
padding: 0;
width: 120px;
height: 119px;
list-style: none;
background: red;
background:url('img/fb_120x238.png') repeat 0 0;
}
</style>
HTML
<ul id="facebook_icon">
<li><a href="#"><div class="box"></div></a></li>
</ul>
使用Javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
<script>
(function() {
$('#facebook_icon li')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -119px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
})();
</script>
更新:工作CSS 3解决方案
CSS 3
#facebook_icon li {
padding: 0;
width: 120px; …推荐指数
解决办法
查看次数
使用jquery/js将html元素作为带有暂停的序列显示
我现在已经搜索了很长一段时间,在每个人都点击我的setTimeout()函数之前,请听我说.
我有~20个不可见的HTML元素.我希望它们一次变为可见,中间暂停.我还希望在将它们变为可见时使用一些jQueries非常棒的动画功能.
所以基本上我想使用JavaScript/jQuery"播放一系列帧/事件/状态".
我看到了什么？
的setTimeout():
我一直在研究JS setTimeout函数,据我所知,当你有1-3个setTimeout()函数时它很有用.
如果你想要更多,它开始变得非常凌乱.它们是嵌入式的,你必须通过将数字加在一起来计算时间,而且很难得到整体情况.
jQuery.delay()
此外,jQuery.delay()函数缺乏实际暂停代码.我有20多个元素,而不是我想要动画的元素.
Updatepanel垃圾邮件
我现在正在考虑的另一种选择(拜托,杀了我),正在使用更新面板.它每秒使用一个计时器进行回发,并使用一个会话,它确切地知道它是什么"帧".然后它可以根据帧数设置可见/不可见的东西,还可以激活jQuery动画.
现在,当我今天早上醒来时,我并没有梦想用这样的更新面板向我的网络服务器发送垃圾邮件....所以:
有没有什么好方法可以做到这一点？我对建议很开放.
非常感谢!:-)
推荐指数
解决办法
查看次数
如何在更改图像属性时使用jquery获得平滑效果？
我编写了以下代码来更改鼠标悬停时的图像源.它改变了图像src,但效果是如此不稳定.OnMouseOver它突然改变了图像.
请告诉我如何减慢动画的效果.
<script>
$(document).ready(function(){
$("#image").hover(function(){
$(this).attr("src","images/pic2.png")
}, function(){
$(this).attr("src","images/pic1.jpg")
});
});
</script>
</head>
<body>
<img id="image" src="images/pic1.jpg">
</body>
编辑
http://jsfiddle.net/MKuvn/
推荐指数
解决办法
查看次数