jquery появляется и исчезает.

Привет, ребята, просто работаю с jquery, и у меня возник вопрос. Я получил изображение внутри div, и мне было интересно, могу ли я с помощью jquery сделать это изображение всплывающим на экране, указав ему координаты x и y. Затем, используя этот код, я могу заставить его двигаться вправо

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

А затем заставьте его исчезать, когда он достигает определенной позиции на экране. Любая помощь в этом вопросе была бы отличной, так как я не очень хорошо разбираюсь в jquery atm.


javascript jquery fadein fadeout
person Blindeagle    schedule 26.11.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете попробовать что-то вроде этого: -

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

функцию обратного вызова можно использовать с помощью постепенного затухания, которое запускается после завершения первого эффекта.

person Rahul Tripathi    schedule 26.11.2012
comment
Думаю, я бы использовал css для размещения div, если бы я хотел, а затем использовал эту функцию постепенного появления, чтобы она отображалась на экране? а затем заставить его двигаться влево с помощью моего кода, тогда я бы использовал функцию затухания, чтобы он исчез? - person Blindeagle; 26.11.2012
comment
Ладно спасибо. Попробую это, и если ничего не получится, надеюсь, кто-то может помочь :). - person Blindeagle; 26.11.2012

arrow_upward
1
arrow_downward

Я бы попробовал что-то вроде этого

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: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();
        });
    })    
});

or 

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

где MoveAndFade() определяется внутри раздела $(document).ready(function(){}).

person chead23    schedule 26.11.2012
comment
Привет, спасибо за этот код. Похоже, это может сработать, но я новичок, что я должен изменить в этом. Только х и у правильно? - person Blindeagle; 26.11.2012
comment
Ok. хорошо, я изменил .box на #laser. я изменил слева: x, сверху: y налево: «150px», что отлично работает. Однако MoveAndFade (x, y) я изменил на то, что вы написали 50 100, но это не сработает. Знаю, почему? - person Blindeagle; 26.11.2012
comment
Если бы вы могли привести мне пример со всем измененным, это было бы здорово. Еще раз спасибо всем за помощь - person Blindeagle; 26.11.2012