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的相应选择器。当前的选择具有类＆＃39;框的元素＆＃39;。然后，您可以传入任何x或y值，如：MoveAndFade(50,100);。您还需要确保div具有position:absolute css属性。

您需要调用函数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);
});

MoveAndFade()部分内定义了$(document).ready(function(){})。

jquery淡入淡出。

2 个答案: