Как сделать изображение hop с jQuery

-3

Можно ли использовать метод animate() в jQuery, чтобы не только дать иллюзию, что изображение подпрыгивает, но надеется на экран, все в одном методе? (Т.е. изображение хмель, как каждые 25 пикселей через окно браузера, делая 3 хмель?Как сделать изображение hop с jQuery

Вот то, что я до сих пор ...

//THE CSS: 

.mimage { 
margin:0 auto; 
position:relative; 
top:-200px; 
right:10px; 
width:57px; 
height:75px; 
display:block; 
outline:#fff; 
font-size:0px; 
background: url('mimage.png') top center no-repeat; 
} 


//THE JQUERY: 

function extensions() { 
/**************/ 
//JQ EXTENSIONS 
/**************/ 
jQuery.extend(jQuery.easing,{ 
easeInOutBack: function (x, t, b, c, d, s) { 
if (s == undefined){ s = 1.70158;} 
if ((t/=d/2) < 1) {return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;} 
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 
} 
}); 
//*/ 
} 

function mhop() { 
/*HOPING ELF*/ 
$.hop = function() { 
var mimage = $("#hc-elf-top"); 
var position = mimage.position(); 

if(position.top < 0) { 
mimage.animate({top:'+=200px'},'slow','easeInOutBack', $.hop); 
} else { 
mimage.animate({top:'-=200px'},'slow','easeInOutBack', $.hop); 
} 
} 
$.hop(); 
//*/   
} 

//RUN THE CODE: 

(function($){ 
extensions(); 
$(window).load(function(){ 
mhop(); 
}) 
})(jQuery);

Как вы можете видеть, я могу сделать элемент сильный удар, но я также хочу выразить свою scrpit, чтобы эльф HOP 25 пикселов вправо. Любые мысли?

Спасибо за любые советы!

MY UPDATE

Большое спасибо Абрахаму за подсказку по использованию свойства left под методом animate(). В результате я смог завершить следующую пользовательскую функцию, чтобы помочь моему маленькому эльфийскому прыжку по экрану. Не только это, но вы можете скорректировать значение цикла, чтобы определить, сколько хоп вам нужно. Не стесняйтесь использовать!

function mhop() { 
    /*ELF HOPS ACROSS SCREEN*/ 

    var loop = 0; 
    var elftop = $("#hc-elf-top"); 

    $.hop = function() { 

    //ANIMATE THE TOP ELF TO HOP 
    var elftopposition = elftop.position(); 
    if(elftopposition.top < 0) { 
    elftop.animate({top:'+=200px',left:'+=25px'},'slow','easeInOutBack', $.hop); 
    } else { 
    elftop.animate({top:'-=200px',left:'+=25px'},'slow','easeInOutBack', $.hop); 
    } 

    //ADJUST HOW MANY HOPS THE ELF TAKES... 
    if (elftopposition.top == 0) { 
     loop += 1; 
     if (loop == 2) { //ADJUST HERE 
     console.log('stop hopping'); 
     elftop.stop(true, true); 
     } 
    } 

} 

//LOOP THE FUNCTION 
$.hop(); 
//*/   
} 

(function($){ 
    extensions(); 
    $(window).load(function(){ 
    mhop(); 
    }) 
    })(jQuery);

источник

2013-11-20 blackhawk

Это точно возможно. Но сначала вам нужно попробовать что-то, как и политика с SO. – j08691

спасибо @ j08691 за подсказку! мой код опубликован. Есть предположения? – blackhawk

вы хотите увеличить левую позицию 25px каждый прыжок? как это [http://jsfiddle.net/94Mn3/](http://jsfiddle.net/94Mn3/) –

переместить .mimage вам нужно анимировать левую позицию, в которой вы анимировать сверху внутри функции хмелевой как этот

if(position.top < 0) { 
    mimage.animate({top:'+=200px',left:"+=25px"},'slow','easeInOutBack', $.hop); 
    console.log('the current position is: '+ position.top); 
} else { 
    mimage.animate({top:'-=200px',left:"+=25px"},'slow','easeInOutBack', $.hop); 
}

вы можете анимировать более чем один CSS свойство внутри живой http://jsfiddle.net/94Mn3/

источник

2013-11-20 17:59:04

Как сделать изображение hop с jQuery

ответ

Смежные вопросы