有很多jQuery彩色插件.但是我找不到在css类声明之间制作动画的那个.
例如做一个平滑的动画从.class1到.class2:
.class1 { background-color: #000000 }
.class2 { background-color: #000088 }
这有可能吗？
$(document).ready(function(){
$('a.nav_menu')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).animate({
backgroundPosition:"(-650px 0)",
'color': '#000000'
}, {duration:700})
})
.mouseout(function(){
$(this).animate({backgroundPosition:"(0px 0)"}, {duration:900, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
});
这有什么问题？文字颜色不会改变.
所以我有工作代码通过插件动画BG图像.这是一个通用的解决方案,尽管类中的每个元素都具有相同的BG图像; 我正在为导航栏的每一列使用带有唯一图像的精灵.因此代码如下:
$('#nav a')
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
这很好用,所以我可以为每个元素设置一个Y偏移量,但是每个链接都有它自己的x偏移量,它根本不会改变/动画.CSS示例:
li.downloads a {
background:url(img/navsprite.png) repeat -318px -9px;
}
我想滚-318px -9px喜欢的东西-318px 200px,但另一种元素我想换-482px -9px到-482px 200px.只有Y偏移量应该改变,但我不知道jQuery的语法是否足以从$(this)元素的CSS中提取该值并将其放入animate参数中.谢谢!
我正在尝试构建一个类似控制台的动画.
我想使用该animate函数调整div的大小,但不是像每步1px这样的平滑动画.我希望每步更像10px.
我在animate函数中找不到解决方案或选项,所以我尝试使用animate的step-option,但它不起作用:
像这样的东西:
$(this).animate({height: "60"}, {
duration: 5000,
step: function(){
var curheight = $(this).height();
$(this).css('height', curheight+9+'px');
}
});
animate 仍然以1像素为单位动画,并忽略新的高度.
有任何想法吗？我有点被困在这里.
谢谢.
我创建了一个下拉菜单,下拉部分的html基本上是这样的:
<div class="menu-item">
<!-- Menu title -->
<div class="drop-down">
<!-- Content -->
</div>
</div>
我想使用jQuery-Code(使用easing-plugin)为此设置动画,但以下代码不起作用:
$(".menu-item").mouseenter(activate);
$(".menu-item").mouseleave(deactivate);
function deactivate()
{
var dropdown = $(this).find("div.drop-down");
dropdown.stop().animate(
{height: '0px'},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
}
function activate()
{
var dropdown = $(this).find("div.drop-down");
dropdown.stop().animate(
{height: 'auto'},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
}
错误控制台中的消息是:"警告:解析'height'值时出错.声明已丢弃."
如果我在activate-Function中使用"height:'100px'"或类似的东西,它会按预期工作.但出于可维护性的原因,我希望自动计算高度,因此下拉菜单会根据其内容调整其大小.
怎么能实现这一目标？
问候,约斯特
我想知道如何在jQuery animate函数中使用收集的变量.这是我正在处理的代码:
var size = $("#myTwitter").width();
var slidelength = (686 - size)*(-1);
var slidelength = slidelength.toString();
var margin = "'margin-left:' '";
var after = "px'";
var output = margin.concat(slidelength, after);
$("#twitWrap").mouseenter(function(){
$("#myTwitter").stop(0).animate(output, 5000);
});
$("#twitWrap").mouseleave(function(){
$("#myTwitter").stop(0).animate({"margin-left": "0px"}, 5000);
});
因为你可以告诉它不工作 - 但仍然不知道为什么.
我试图使用JQuery动画图像到我在div上单击鼠标的点.
html的div的id为"stage",图像的id为"player".当用户点击舞台时,我已经成功获得了标题更新,但是一旦我添加了其他JQuery以使图像移动到我在舞台上的鼠标点击,它们都不起作用.
也许它显而易见,因为我是JQuery的新手,但希望有人能发现我的错误.
这是我的JQuery代码:
$(document).ready(function(){
//alert('It works');
$('#stage').click(function() {
$('#header').html('Image is moving!');
});
$('#stage').click(function(e){
$('#player').animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
});
});
总之,当有人点击阶段div时,其上方的标题应该更改,并且图像应移动到该人在舞台上单击的位置.
我有以下HTML代码:`
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
backgroundColor: '#f5f5f5',
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>`
但我无法使用动画提到的背景颜色.
请告诉我有什么问题？
谢谢
Smitha
我需要在另一个完成时启动动画？这是我有的:
$( "div.line" ).each(function() {
$( this ).animate({
height: "100%",
}, 1000 );
});
我有这个代码来更改集合视图单元格的背景,但由于某种原因,它不起作用.
UIView.animateWithDuration(2, animations: {() -> Void in
self.backgroundColor = UIColor.blackColor()
})
你能帮我么？
jquery-animate ×10
jquery ×9
javascript ×4
animation ×1
colors ×1
css ×1
css3 ×1
each ×1
ios ×1
mouseevent ×1
swift ×1
variables ×1