我正在尝试制作一些div来制作动画,然后在回调中调用另一个函数.没什么难的.这是代码:
function transfertMenu(){
var chosenOption = this.firstChild.firstChild.id;
$('#leftMenucontent').animate({
left:'0px'
}, 500, constructMenu());
$('#leftMenucontent > ul > li').remove();
chooseMenu(chosenOption);
}
Run Code Online (Sandbox Code Playgroud)
并尝试过
function transfertMenu(){
var chosenOption = this.firstChild.firstChild.id;
$('#leftMenucontent').animate({
left:'0px'
}, 500, function() {
constructMenu();
});
$('#leftMenucontent > ul > li').remove();
chooseMenu(chosenOption);
}
Run Code Online (Sandbox Code Playgroud)
问题是,当我在回调(constructMenu)中放置一个alert()时,它完美地运行,动画结束,然后弹出警报.当我输入一个函数时,它会在动画完成之前从头开始.这是一个错误,还是我做错了什么?
我正在尝试使用按下按钮时jQuery更改部分的背景颜色<div>,下面是执行该操作的代码.为什么不工作?
HTML文件
<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
#name{
background-color: #FFFFF2;
width: 100px;
}
</style>
</head>
<body>
<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
的script.js
$("bgcolor").click(function(){
$("#name").animate(
{backgroundColor: '#8B008B'},
"fast");}
);
Run Code Online (Sandbox Code Playgroud)
谢谢.
我正在使用jQuery插件进行自定义Easing(jQuery Easing v1.3 -http://gsgd.co.uk/sandbox/jquery/easing/),为我的jQuery Tools可滚动实例添加自定义缓动,如下所示:
$(".historyScrollable").scrollable({ easing:"easeInOutCubic"}).navigator();
我希望也能使用jQuery Easing插件与.animate函数一起使用
我试过像这样使用它:
$(this).find('div').stop().animate({'marginLeft':'-280px'},200,easeInOutCubic);
但它说没有定义"easeInOutCubic".我正在做的是什么,而我的语法错了?我也试过使用specialEasing,但似乎也没有用:
$(this).find('div').stop().animate({'marginLeft':'-280px'},{duration:200, customEasing:{'marginLeft':'easeInOutCubic'}});
我想创建一个if - else条件系统,只有当上边距不是0时才允许向上滚动.我将在jquery中使用.animate动作来创建动画.
$('#up-arrow a').click(function(){
if('#slider'.css(margin-top)!='0px')
$('#slider').animate({'margin-top':'+=320px'});
else
Run Code Online (Sandbox Code Playgroud)
有人可以帮我纠正一下吗?它没有if,但在我添加了if-else后它什么也没做.
这是一个非常直截了当的问题.我基本上在页面上有一个div块,当点击时,它的大小会增加,再次点击时会返回到原来的状态.我的问题是它似乎根本不起作用.另外,我确信在两个动画状态之间切换的方式要比这样的if语句更清晰,但是我不确定如何去做.
$(document).ready(function(){
var toggle = 0;
$(".login").click(function(){
if($toggle == 0){
$(this).animate({
height: '200',
}, 500, function(){
});
$toggle = 1;
}
else if($toggle == 1){
$(this).animate({
height: '100',
}, 500, function(){
});
$toggle = 0;
}
});
});
Run Code Online (Sandbox Code Playgroud)
相应的HTML代码很简单
<div class="login">Click Me</div>
Run Code Online (Sandbox Code Playgroud)
如果还有其他需要,请告诉我.
在这段代码中,jQuery Animate边框似乎不能很好地运行:http: //jsbin.com/ewuyup/13/edit
有没有人有任何想法来解决它?
我在Animate的jQuery网站上看到了这个.
不完全支持速记CSS属性(例如字体,背景,边框).例如,如果要为渲染的边框宽度设置动画,则必须至少预先设置"auto"以外的边框样式和边框宽度.或者,如果要为字体大小设置动画,则可以使用fontSize或CSS等效的'font-size'而不是简单的'font'.
希望可以有人帮帮我.
我希望背景图像淡出.
我有两个div在彼此之上,背景设置为图像.
在我的jQuery中,我定位一个div,然后将不透明度显示为零,显示另一个.然后我反过来.但是,这是有效的,但现在由于某种原因,这个无限循环崩溃了Firefox.
我该怎么做才能让它不崩溃?
$(document).ready(function() {
function change (){
$('#back1').animate({opacity:0}, {duration:3000});
$('#back1').delay(1000);
$('#back1').animate({opacity:1}, {duration:3000});
$('#back1').delay(1000);
change();
}
change();
});
Run Code Online (Sandbox Code Playgroud) 我有这个代码:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function loop(){
$('#picOne').fadeIn(0).fadeOut(8000);
$('#picTwo').delay(2000).fadeIn(6000).fadeOut(5000);
$('#picTree').delay(10000).fadeIn(2000).fadeOut(16000);
$('#picFour').delay(12000).fadeIn(16000).fadeOut(5000);
}
loop();
});
</script>
Run Code Online (Sandbox Code Playgroud)
但是当最后一张照片淡出时,代码不会重复.问题是什么?
$(element).animate(
{
scale: 1,
centerX: -(this.chartObj.model.m_AreaBounds.Width /2),
centerY:-(this.chartObj.model.m_AreaBounds.Height /2)
},
{
duration: 2000,
step: function(now,fx) {
var scaleVal, x, y;
if (fx.prop == "scale") {
scaleVal = now;
x = 0;
y = 0;
} else if (fx.prop == "centerX") {
x = now;
y = 0;
scaleVal = 0;
}
else if (fx.prop == "centerY") {
x = 0;
y = now;
scaleVal = 0;
}
$(element).attr("transform", "translate("+x*(scaleVal-1)+","+(y*scaleVal-1)+")scale(" + now + ")");
}
}
);
Run Code Online (Sandbox Code Playgroud)
在步骤函数中,prop值将逐步进行(即,首先scale,然后centerX …
当我为某些元素的不透明度设置动画时,似乎动画并不总是完成.我的工具提示的结果如图所示(复制,在div上来回摆动鼠标):

方框1和方框2上面仍然有鬼元素.
这是我的jQuery
$(document).ready(function(){
$(".thumbnail").hover(function(){
$(this).parent().find(".tooltip").animate({
opacity: 1,
top: '105%'
}, 200, 'swing', false);
$(this).find(".label").stop(false, true).fadeIn(2);
},function(){
$(this).parent().find(".tooltip").animate({
opacity: 0,
top: '100%'
}, 200, 'swing', false);
$(this).find(".label").stop().fadeOut();
});
$(".label").click(function(){
var url = $(this).find('h3 a').attr('href');
window.location.href = url;
})
});
Run Code Online (Sandbox Code Playgroud)
还有一个小提琴:http://jsfiddle.net/qu7Tu/
jquery ×10
jquery-animate ×10
css ×2
javascript ×2
easing ×1
html ×1
if-statement ×1
toggle ×1