Мне нужно сделать несколько divs движением справа налево по экрану и остановиться, когда он доберется до края. В последнее время я играю с jQuery, и похоже, что я хочу, чтобы это можно было сделать с этим. Кто-нибудь есть или знает, где я могу найти пример этого?
Как я могу использовать jQuery для перемещения div по экрану
Ответ 1
Вам нужно проверить функцию jQuery animate(). Стандартный способ сделать это - это позиционирование элемента абсолютно, а затем оживление свойства "left" или "right" CSS. Не менее популярным способом является увеличение/уменьшение левого или правого поля.
Теперь, сказав это, вам нужно знать о серьезной потери производительности для любого типа анимации, которая длится дольше, чем секунда или два. Javascript просто не предназначен для длительной, продолжительной, медленной анимации. Это связано с тем, как элемент DOM перерисовывается и пересчитывается для каждого "кадра" анимации. Если вы делаете анимацию ширины страницы, которая длится более пары секунд, ожидайте, что ваш процессор будет падать на 50% и более. Если вы находитесь на IE6, подготовьтесь к тому, чтобы ваш компьютер спонтанно сгорел в пылающий шар с некомпетентностью браузера.
Чтобы узнать об этом, просмотрите этот поток (из моего первого сообщения Stackoverflow не менее)!
Здесь ссылка на документы jQuery для функции animate(): http://docs.jquery.com/Effects/animate
Ответ 2
В jQuery 1.2 и новее вам больше не нужно позиционировать элемент; вы можете использовать нормальное относительное позиционирование и использовать + = или - = для добавления или вычитания из свойств, например.
$("#startAnimation").click(function(){
$(".toBeAnimated").animate({
marginLeft: "+=250px",
}, 1000 );
});
И чтобы повторить парня, который ответил на первый совет: Javascript не работает. Не злоупотребляйте анимацией или не ожидайте чего-либо, кроме как быстро и быстро работать на своем высокопроизводительном ПК в Chrome, чтобы хорошо выглядеть на стандартном компьютере, работающем под управлением болота. Протестируйте его и убедитесь, что он сильно ухудшается!
Ответ 3
посмотрите эта демонстрация - используйте эффект анимации jQuery для перемещения div
Ответ 4
Здесь я сделал полные бункеры для вышеуказанного запроса. ниже - демонстрационная ссылка, я думаю, это может помочь вам
Демо: 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');
}
});
});
});
Ответ 5
Использовать jQuery
HTML
<div id="b"> </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;
}
script
var b = function($b,speed){
$b.animate({
"left": "50%"
}, speed);
};
$(function(){
b($("#b"), 5000);
});
см. jsfiddle http://jsfiddle.net/vishnurajv/Q4Jsh/
Ответ 6
Просто небольшая функция, которую я барабанил, перемещает DIVs из своего текущего места в целевое пятно, по одному пикселю за раз. Я попытался прокомментировать как можно лучше, но интересующая вас часть находится в примере 1 и примере 2 сразу после [$ (function() {//jquery document.ready]. Поместите свой код проверки границ там, а затем выйдите из интервала, если выполнены условия. Требуется jQuery.
Сначала Демо: http://jsfiddle.net/pnYWY/
Сначала 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>
пример 1) Пуск
// 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
пример 2) Задержка запуска
// 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
Теперь функция:
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 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)