javascript - jquery 淡入淡出。

Question

嗨，伙计们，他们只是在使用 jquery 做一些工作，然后遇到了一个问题。我在一个 div 中得到了一个图像，想知道是否使用 jquery 我可以通过给它一个 x 和 y 坐标来使该图像在屏幕上弹出。然后使用这个代码我可以让它向右移动

$('#red').pan({fps: 30, 
speed: 0.5, dir: 'right'});

然后让它在到达屏幕上的某个位置时淡出。在这个问题上的任何帮助都会很棒，因为我对 jquery atm 不太好。

Answer 1

你可以尝试这样的事情： -

  $('#A').fadeOut( function() {
         $('#B').fadeIn();
       });

在第一个效果完成后运行的淡出可以采取回调函数

Answer 2

我会尝试这样的事情

function MoveAndFade(x, y)
{
    $('.box').fadeIn('slow', function ()
    {
        $(this).animate({ left: x, top: y }, 'slow', 'swing', function ()
        {
            $(this).fadeOut();
        });
    })    
}

基本上它会淡入 div，然后将其移动到您指定的位置，然后淡出。这将依次发生。

您需要将选择器更改$('.box')为适合您的 div 的选择器。当前的选择具有类'box'的元素。然后，您可以传入任何 x 或 y 值，例如：MoveAndFade(50,100);。您还需要确保 div 具有position:absolutecss 属性。

您需要调用MoveAndFade传入所需参数的函数，例如

<input type="button" value="Click me" onclick='MoveAndFade(150,50);' />

或者，如果您想在 DOM 加载后运行，请执行以下操作：

$(document).ready(function(){
    $('.box').fadeIn('slow', function ()
    {
        $(this).animate({ left: '150', top: '50' }, 'slow', 'swing', function ()
        {
            $(this).fadeOut();
        });
    })    
});

或者

$(document).ready(function(){
    MoveAndFade(150,50);
});

whereMoveAndFade()在节内定义$(document).ready(function(){})。