jQuery로 이미지 홉핑하는 법

-3

jQuery에서 animate() 메서드를 사용하면 이미지가 튀거나 화면 전체에서 바래지 않는다는 환상을 줄 수 있습니까? (즉, 이미지가 3 홉을하고, 브라우저 화면에서 모든 25 개 픽셀처럼 홉 여기에 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);

당신이 볼 수 있듯이, 나는 요소를 만들 수 있어요 바운스, 그러나 나는 또한 오른쪽에있는 엘프 홉 25 개 픽셀을 내 scrpit를 확장하고자합니다. 어떤 생각? 어떤 조언을

감사합니다!

MY UPDATE

애니메이션 메서드() 아래에서 left 속성을 사용하는 것에 대한 조언을 주신 Abraham 대단히 감사합니다. 결과적으로 다음과 같은 사용자 정의 함수를 사용하여 화면에서 작은 엘프 홉을 도울 수있었습니다. 뿐만 아니라 루프 값을 조정하여 원하는 홉 수를 결정할 수 있습니다. 부담없이 사용하십시오!

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 각 홉을 증가 시키시겠습니까? like this [http://jsfiddle.net/94Mn3/](http://jsfiddle.net/94Mn3/) –

당신이 애니메이션 내에서 하나 이상의 CSS 속성에 애니메이션을 적용 할 수 있습니다이

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

같은 홉 기능 내부 상단에 애니메이션 위치를 왼쪽 위치에 애니메이션을 필요로하는 .mimage를 이동 http://jsfiddle.net/94Mn3/

출처

2013-11-20 17:59:04

jQuery로 이미지 홉핑하는 법

답변

관련 문제