Comment puis-je utiliser jQuery pour déplacer un div à travers l'écran?

Question

Je dois faire bouger plusieurs divs de droite à gauche sur l'écran et arrêter quand il arrive au bord. J'ai récemment joué avec jQuery, et il me semble que ce que je veux peut être fait en utilisant ça. Est-ce que quelqu'un a ou sait où je peux trouver un exemple de ceci?

Answer 1

Vous souhaiterez vérifier la fonction animée jQuery(). La manière standard de le faire est de positionner un élément absolument et ensuite d'animer la propriété CSS "left" ou "right". Un moyen également populaire est d'augmenter/diminuer la marge de gauche ou de droite. Maintenant, cela étant dit, vous devez être conscient de la perte de performance grave pour tout type d'animation qui dure plus d'une seconde ou deux. Javascript n'était tout simplement pas destiné à gérer des animations longues, soutenues et lentes. Cela a à voir avec la façon dont l'élément DOM est redessiné et recalculé pour chaque "frame" de l'animation. Si vous effectuez une animation de largeur de page qui dure plus de quelques secondes, attendez-vous à voir votre processeur augmenter de 50% ou plus. Si vous êtes sur IE6, préparez-vous à voir votre ordinateur s'enflammer spontanément dans une boule enflammée d'incompétence du navigateur.

Pour lire à ce sujet, consultez this thread (à partir de mon tout premier post Stackoverflow pas moins)!

est ici un lien vers les docs jQuery pour l'Animate() fonction: http://docs.jquery.com/Effects/animate

Answer 2

Dans jQuery 1.2 et plus récente, vous n'avez plus à placer l'élément tout à fait; vous pouvez utiliser le positionnement relatif normal et utiliser + = ou - = pour ajouter ou soustraire des propriétés, par ex.

$("#startAnimation").click(function(){ 
    $(".toBeAnimated").animate({ 
     marginLeft: "+=250px", 
    }, 1000); 
}); 

Et pour faire écho le gars qui a répondu d'abord les conseils: Javascript est pas performant. N'utilisez pas trop les animations, ou ne vous attendez pas à ce que les choses tournent bien et rapidement sur votre PC haute performance sur Chrome pour qu'il soit esthétique sur un PC tournant sous IE. Testez-le, et assurez-vous qu'il se dégrade bien!

Answer 3

un coup d'oeil à this demo - use jquery animation effect for moving a div

Answer 4

Ici je l'ai fait bacs complets pour la requête ci-dessus. ci-dessous est le lien de démonstration, je pense que cela peut vous aider à

Démo:http://codebins.com/bin/4ldqp9b/1

HTML:

<div id="edge"> 
    <div class="box" style="top:20; background:#f8a2a4;"> 
    </div> 
    <div class="box" style="top:70; background:#a2f8a4;"> 
    </div> 
    <div class="box" style="top:120; background:#5599fd;"> 
    </div> 
</div> 
<br/> 
<input type="button" id="btnAnimate" name="btnAnimate" value="Animate" /> 

CSS:

body{ 
    background:#ffffef; 
} 
#edge{ 
    width:500px; 
    height:200px; 
    border:1px solid #3377af; 
    padding:5px; 
} 

.box{ 
    position:absolute; 
    left:10; 
    width:40px; 
    height:40px; 
    border:1px solid #a82244; 
} 

JQuery:

$(function() { 
    $("#btnAnimate").click(function() { 
     var move = ""; 
     if ($(".box:eq(0)").css('left') == "10px") { 
      move = "+=" + ($("#edge").width() - 35); 
     } else { 
      move = "-=" + ($("#edge").width() - 35); 
     } 
     $(".box").animate({ 
      left: move 
     }, 500, function() { 
      if ($(".box:eq(0)").css('left') == "475px") { 
       $(this).css('background', '#afa799'); 
      } else { 
       $(".box:eq(0)").css('background', '#f8a2a4'); 
       $(".box:eq(1)").css('background', '#a2f8a4'); 
       $(".box:eq(2)").css('background', '#5599fd'); 
      } 

     }); 
    }); 
}); 

Démo:http://codebins.com/bin/4ldqp9b/1

Answer 5

Juste une petite fonction rapide, je tambourinait qui se déplace DIVs de leur place actuelle à un point cible, une étape de pixel à la fois. J'ai essayé de commenter le mieux possible, mais la partie qui vous intéresse est l'exemple 1 et l'exemple 2, juste après [$ (function() {// jquery document.ready]. codez-le, puis quittez l'intervalle si les conditions sont remplies.

D'abord le Demo: http://jsfiddle.net/pnYWY/

D'abord les DIVs ...

<style> 
    .moveDiv { 
    position:absolute; 
    left:20px; 
    top:20px; 
    width:10px; 
    height:10px; 
    background-color:#ccc; 
    } 

    .moveDivB { 
    position:absolute; 
    left:20px; 
    top:20px; 
    width:10px; 
    height:10px; 
    background-color:#ccc; 
    } 
</style> 


<div class="moveDiv"></div> 
<div class="moveDivB"></div> 

exemple 1) Lancer

// first animation (fire right away) 
var myVar = setInterval(function(){ 
    $(function() { // jquery document.ready 

     // returns true if it just took a step 
     // returns false if the div has arrived 
     if(!move_div_step(55,25,'.moveDiv')) 
     { 
      // arrived... 
      console.log('arrived'); 
      clearInterval(myVar); 
     } 

    }); 
},50); // set speed here in ms for your delay 

exemple 2) Départ différé

// pause and then fire an animation.. 
setTimeout(function(){ 
    var myVarB = setInterval(function(){ 
     $(function() { // jquery document.ready 
      // returns true if it just took a step 
      // returns false if the div has arrived 
      if(!move_div_step(25,55,'.moveDivB')) 
      { 
       // arrived... 
       console.log('arrived'); 
       clearInterval(myVarB); 
      } 
     }); 
    },50); // set speed here in ms for your delay 
},5000);// set speed here for delay before firing 

maintenant la fonction:

function move_div_step(xx,yy,target) // takes one pixel step toward target 
{ 
    // using a line algorithm to move a div one step toward a given coordinate. 
    var div_target = $(target); 

    // get current x and current y 
    var x = div_target.position().left; // offset is relative to document; position() is relative to parent; 
    var y = div_target.position().top; 

    // if x and y are = to xx and yy (destination), then div has arrived at it's destination. 
    if(x == xx && y == yy) 
     return false; 

    // find the distances travelled 
    var dx = xx - x; 
    var dy = yy - y; 

    // preventing time travel 
    if(dx < 0)   dx *= -1; 
    if(dy < 0)   dy *= -1; 

    // determine speed of pixel travel... 
    var sx=1, sy=1; 

    if(dx > dy)   sy = dy/dx; 
    else if(dy > dx) sx = dx/dy; 

    // find our one... 
    if(sx == sy) // both are one.. 
    { 
     if(x <= xx) // are we going forwards? 
     { 
      x++; y++; 
     } 
     else // .. we are going backwards. 
     { 
      x--; y--; 
     }  
    } 
    else if(sx > sy) // x is the 1 
    { 
     if(x <= xx) // are we going forwards..? 
      x++; 
     else // or backwards? 
      x--; 

     y += sy; 
    } 
    else if(sy > sx) // y is the 1 (eg: for every 1 pixel step in the y dir, we take 0.xxx step in the x 
    { 
     if(y <= yy) // going forwards? 
      y++; 
     else // .. or backwards? 
      y--; 

     x += sx; 
    } 

    // move the div 
    div_target.css("left", x); 
    div_target.css("top", y); 

    return true; 
} // END :: function move_div_step(xx,yy,target) 

Answer 6

Utilisez jQuery

html

<div id="b">&nbsp;</div> 

css

div#b { 
    position: fixed; 
    top:40px; 
    left:0; 
    width: 40px; 
    height: 40px; 
    background: url(http://www.wiredforwords.com/IMAGES/FlyingBee.gif) 0 0 no-repeat; 
} 

scénario

var b = function($b,speed){ 


    $b.animate({ 
     "left": "50%" 
    }, speed); 
}; 

$(function(){ 
    b($("#b"), 5000); 
}); 

voir jsfiddle http://jsfiddle.net/vishnurajv/Q4Jsh/