[英]jquery fading in and out.
Hi guys just doing some work with jquery and just got a question.大家好,刚刚用 jquery 做一些工作,刚刚有一个问题。 I got an image inside a div and was wondering if with jquery i can make that image pop up on the screen by giving it an x and y coordinate.
我在 div 中得到了一个图像,想知道是否可以使用 jquery 通过给它一个 x 和 y 坐标来使该图像在屏幕上弹出。 Then using this code i can make it move right
然后使用此代码我可以让它向右移动
$('#red').pan({fps: 30,
speed: 0.5, dir: 'right'});
And then make it fade out when it gets to a certain position on the screen.然后当它到达屏幕上的某个位置时让它淡出。 Any help on this matter would be great as iam not to great with jquery atm.
关于这个问题的任何帮助都会很好,因为我对 jquery atm 不太好。
You can try someting like this:-你可以尝试这样的事情:-
$('#A').fadeOut( function() {
$('#B').fadeIn();
});
callback function can be taken by fadeout that runs after the first effect is completed回调函数可以被第一个效果完成后运行的淡出采用
I would try something like this我会尝试这样的事情
function MoveAndFade(x, y)
{
$('.box').fadeIn('slow', function ()
{
$(this).animate({ left: x, top: y }, 'slow', 'swing', function ()
{
$(this).fadeOut();
});
})
}
Basically it will fade-in the div, then move it to the position you specify, then fade-out.基本上它会淡入div,然后将其移动到您指定的位置,然后淡出。 This will happen sequentially.
这将依次发生。
You will want to change the selector $('.box')
to the appropriate selector for your div.您需要将选择器
$('.box')
更改为适合您的 div 的选择器。 The current one selects the element with the class 'box'.当前选择具有“box”类的元素。 You can then pass in any x or y value like:
MoveAndFade(50,100);
然后您可以传入任何 x 或 y 值,例如:
MoveAndFade(50,100);
. . You will also need to make sure the div has
position:absolute
css attribute.您还需要确保 div 具有
position:absolute
css 属性。
You need to call the function MoveAndFade
passing in the parameters that you want eg您需要调用函数
MoveAndFade
传入您想要的参数,例如
<input type="button" value="Click me" onclick='MoveAndFade(150,50);' />
Or if you want to run when the DOM has loaded do something like:或者,如果您想在 DOM 加载后运行,请执行以下操作:
$(document).ready(function(){
$('.box').fadeIn('slow', function ()
{
$(this).animate({ left: '150', top: '50' }, 'slow', 'swing', function ()
{
$(this).fadeOut();
});
})
});
or或者
$(document).ready(function(){
MoveAndFade(150,50);
});
where MoveAndFade()
is defined inside the $(document).ready(function(){})
section.其中
MoveAndFade()
是在$(document).ready(function(){})
部分中定义的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.